رفتن به مطلب
پشتیبانی سایت ساز IPB/IPS فارسی
خدمات و محتویات منتشر یافته در IPSFarsi

آموزش : حالت لرزشی لوگو انجمن

علی مددی

ارسال‌های توصیه شده

  • مدیر کل بازنشسته سایت
علی مددی

علی مددی 1689

ارسال شده در
  • مدیر کل بازنشسته سایت
ارسال شده در

در این آموزش وقتی که موس بر روی لوگو انجمن قرار  می گیرد لوگو شروع به لرزش می کنید.

 

1- به آدرس زیر رفته 

Look & Feel >> Manage Skin Sets & Templates >> Manage Templates in >> Your Skin >> CSS >> ipb_styles.css

2- کد زیر را به انتهای کد های استایل قالب (ipb_styles.css) اضافه نموده

@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.shake {
display:inline-block
}

3- به آدرس زیر رفته

Look & Feel >> Manage Skin Sets & Templates >> Manage Templates in >> Your Skin >> Templates >> Global Templates >> defaultHeader

4- کد زیر را پیدا کنید

<a href='{$this->settings['board_url']}' title='{$this->lang->words['go_home']}' rel="home" accesskey='1'><img src='{parse replacement="logo_img"}' alt='{$this->lang->words['logo']}' /></a>

و  این کد را جایگزین کنید.

<a href='{$this->settings['board_url']}' title='{$this->lang->words['go_home']}' rel="home" accesskey='1'><img src='{parse replacement="logo_img"}' alt='{$this->lang->words['logo']}' class="shake" /></a>

نکته : این آموزش تا اینجا فقط بر روی تصویر لوگو اعمال می شود. و برای اینکه بر روی متن نیز اعمال گردد در همان قسمت defaultHeader 

کد زیر را پیدا کنید 

     class='textLogo'

و بعد از textLogo کلاس shake ر ابه آن اضافه کنید یعنی به این شکل 

class='textLogo shake'

خسته نباشید امیدوارم لذت برده باشید.... :DD:

لینک ارسال
به اشتراک گذاری در سایت های دیگر
  • 8 ماه بعد...
multiman

multiman 30

ارسال شده در
ارسال شده در

سلام مرسی

من انجام دادم ولی

لرزش نداره

همون حالت قدیمی خودشو داره :o

http://oxingallery.com/forum/

مشکل میتونه از کجا باشه؟

مرسی

لینک ارسال
به اشتراک گذاری در سایت های دیگر
  • مدیر کل بازنشسته سایت
علی مددی

علی مددی 1689

ارسال شده در
  • سازنده
  • مدیر کل بازنشسته سایت
ارسال شده در

در مرحله دوم ، در استایل قالب بجای کد قبلی از این کد استفاده کنید. (در کد بالا هیچ مشکلی نیست و فقط در مرورگر کروم قابل نمایش است)

 

2- کد زیر را به انتهای کد های استایل قالب (ipb_styles.css) اضافه نموده

/******** shake:hover *********/
@keyframes spaceboots {
0% { transform: translate(2px, 1px) rotate(0deg); }10% { transform: translate(-1px, -2px) rotate(-1deg); }20% { transform: translate(-3px, 0px) rotate(1deg); }30% { transform: translate(0px, 2px) rotate(0deg); }40% { transform: translate(1px, -1px) rotate(1deg); }50% { transform: translate(-1px, 2px) rotate(-1deg); }60% { transform: translate(-3px, 1px) rotate(0deg); }70% { transform: translate(2px, 1px) rotate(-1deg); }80% { transform: translate(-1px, -1px) rotate(1deg); }90% { transform: translate(2px, 2px) rotate(0deg); }100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes spaceboots {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }30% { -moz-transform: translate(0px, 2px) rotate(0deg); }40% { -moz-transform: translate(1px, -1px) rotate(1deg); }50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }90% { -moz-transform: translate(2px, 2px) rotate(0deg); }100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-o-keyframes spaceboots {
0% { -o-transform: translate(2px, 1px) rotate(0deg); }10% { -o-transform: translate(-1px, -2px) rotate(-1deg); }20% { -o-transform: translate(-3px, 0px) rotate(1deg); }30% { -o-transform: translate(0px, 2px) rotate(0deg); }40% { -o-transform: translate(1px, -1px) rotate(1deg); }50% { -o-transform: translate(-1px, 2px) rotate(-1deg); }60% { -o-transform: translate(-3px, 1px) rotate(0deg); }70% { -o-transform: translate(2px, 1px) rotate(-1deg); }80% { -o-transform: translate(-1px, -1px) rotate(1deg); }90% { -o-transform: translate(2px, 2px) rotate(0deg); }100% { -o-transform: translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes spaceboots {
0% { -ms-transform: translate(2px, 1px) rotate(0deg); }10% { -ms-transform: translate(-1px, -2px) rotate(-1deg); }20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }30% { -ms-transform: translate(0px, 2px) rotate(0deg); }40% { -ms-transform: translate(1px, -1px) rotate(1deg); }50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }90% { -ms-transform: translate(2px, 2px) rotate(0deg); }100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
animation: spaceboots linear 0.8s infinite;
transform-origin:50% 50%;
-webkit-animation: spaceboots linear 0.8s infinite;
-webkit-transform-origin:50% 50%;
-moz-animation: spaceboots linear 0.8s infinite;
-moz-transform-origin:50% 50%;
-o-animation: spaceboots linear 0.8s infinite;
-o-transform-origin:50% 50%;
-ms-animation: spaceboots linear 0.8s infinite;
-ms-transform-origin:50% 50%;
}
.shake {
display:block;
position:relative;
}
a.shake {
display:inline-block;
}
لینک ارسال
به اشتراک گذاری در سایت های دیگر
محمود بارانی

محمود بارانی 62

ارسال شده در
ارسال شده در

نه ارتباطی با قالب نداره به گمونم. ایشااله وقت شد منم از این جور پست ها قرار میدم(البت اگه بر آن شدیم از IPB استفاده کنیم)

روی قالب cubic تست کردم جواب داد.

لینک ارسال
به اشتراک گذاری در سایت های دیگر
multiman

multiman 30

ارسال شده در
ارسال شده در

دوستان به خاطر این نیست؟

ادرس لوگو من

//oxingallery.com/forum/public/style_images/7_logo.png

 

هست

 

ربطی به این موضوع داره؟

لینک ارسال
به اشتراک گذاری در سایت های دیگر

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

رفتن به فهرست موضوع ها

  • کاربران آنلاین در این صفحه   0 کاربر

    • هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.
×
×
  • اضافه کردن...