امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
انیمیشن‌های پرکاربرد wow در طراحی سایت
نویسنده پیام
nooshin88 آفلاین
عضو انجمن
عضو


ارسال‌ها:
67
تاریخ عضویت:
Jan 2016
اعتبار:
0
تشکر ها: 0
1 تشکر شده در 1 ارسال
ارسال: #1
انیمیشن‌های پرکاربرد wow در طراحی سایت
[تصویر:  wow.jpg]

شاید برایتان جالب باشد که بدانید چگونه می توان  یک یا چند تگ HTML  را با انیمیشن های متفاوت در صفحه وب ظاهر کرد؟ در این مقاله قصد داریم پلاگین wow را به شما معرفی کنیم.

زمانی که صفحه وب را باز نمایید محتوای صفحه به صورت پیش فرض نامرئی (opacity=0) هستند  و هنگام اسکرول صفحه وب, محتوا با انیمیشن خاصی ظاهر می شود که این انیمیشن مربوط به css می‌باشد. همچنین شما می‌توانید به آسانی تنظیمات آن را  تغییر دهید.

مزایا:

    حجم آن نسبت به پلاگین‌های جاوا اسکریپت کمتر می‌باشد.
    نصب فوق العاده آسان 
    اجرای سریع و حجم کد کمتر
    امکان تغییر تنظیمات

دمو آنلاین

انیمیشن های css

راهنمای نصب wow:

 1-لینک css 


کد:
<link rel="stylesheet" href="/css/animate.css">

 

2-لینک js



کد:
 <script src="/js/wow.min.js"></script>


3-قرار دادن کد زیر در فایل js



کد:
 <script>
 new WOW().init();
 </script>



4-کلاس wow به المان مورد نظر


کد:
<div class="wow">
Content to Reveal Here
 </div>



5-انتخاب استایل css 


کد:
 <div class="wow bounceInUp">

 محتوا اینجا قرار می‌گیرد

کد:
 </div>


موارد دیگر:

data-wow-duration: مدت زمان انیمیشن
data-wow-delay:تاخیر انیمیشن
data-wow-iteration:تعداد دفعات تکرار انیمیشن
data-wow-offset:فاصله شروع انیمیشن تا المان مورد نظر


کد:
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>


سفارشی سازی انیمیشن:

boxClass:نام کلاس 
animateClass:نام کلاس برای انیمیشن ها 
mobile: فعال یا غیر فعال نمودن پلاگین در دستگاه موبایل
live:تیک کردن المان های جدید

کد:
wow = new WOW(
{
 boxClass: 'wow', // default
 animateClass: 'animated', // default
 offset: 0, // default
 mobile: true, // default
live: true // default
}
)
wow.init();
 
منبع: انیمیشن در صفحات وب ستروکیت
جستجو پاسخ با نقل قول


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  قالب سایت چیست؟ nooshin88 0 38 12-27-2017، 11:58
آخرین ارسال: nooshin88
  از طراحی سایت جوملا چه می دانید؟ nooshin88 0 30 12-13-2017، 11:48
آخرین ارسال: nooshin88
  نکات طراحی سایت خوب و صحیح nooshin88 0 66 11-02-2017، 11:15
آخرین ارسال: nooshin88
  عوامل موفقیت سایت‌های تجاری nooshin88 0 218 09-06-2017، 10:55
آخرین ارسال: nooshin88
  اصول اساسی طراحی سایت hostcode 0 237 06-04-2017، 20:20
آخرین ارسال: hostcode
  آیتم هایی که در طراحی سایت آزار دهنده هستند hostcode 0 270 05-25-2017، 21:06
آخرین ارسال: hostcode
  تاثیر برچسب ها در طراحی وب سایت hostcode 0 247 05-16-2017، 03:58
آخرین ارسال: hostcode
  چگونه یک وب سایت نمونه طراحی کنیم؟ hostcode 0 269 05-16-2017، 03:57
آخرین ارسال: hostcode
  برای طراحی سایت از کجا باید شروع کرد؟؟؟ nooshin88 0 273 05-07-2017، 10:09
آخرین ارسال: nooshin88
  روش های موثر برای معروف کردن سایت کدامند؟ hostcode 0 300 05-02-2017، 02:02
آخرین ارسال: hostcode

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان
یوهاستینگ در بهمن سال 1389 با هدف ارائه خدمات میزبانی وب تاسیس گردید که در مدت زمانی نچندان کوتاه توانست در چهارمین جشنواره وب ایران سال 1390 عنوان هاستینگ برگزیده را به دست آورد.