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


ارسال‌ها:
53
تاریخ عضویت:
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();
 
منبع: انیمیشن در صفحات وب ستروکیت
جستجو پاسخ با نقل قول


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  طراحی سایت اینترنتی zoomtech 0 11 04-23-2017، 23:17
آخرین ارسال: zoomtech
  آنالیز وب سایت | آنالیز بهینه سازی سایت | آنالیز سئو سایت sitecode7 0 23 04-19-2017، 13:55
آخرین ارسال: sitecode7
  دسته بندی طراحی وب سایت ها sitecode7 0 21 04-19-2017، 13:53
آخرین ارسال: sitecode7
  آموزش طراحی سایت گردشگری ونکات مربوطه sitecode7 0 28 04-16-2017، 13:24
آخرین ارسال: sitecode7
  هفت نکته که در زمان طراحی سایت باید به آن توجه کنید hostcode 0 89 03-18-2017، 18:38
آخرین ارسال: hostcode
  طراحی سایت خبری hostcode 0 84 03-17-2017، 17:41
آخرین ارسال: hostcode
  طراحی سایت با وردپرس hostcode 0 71 03-15-2017، 21:23
آخرین ارسال: hostcode
  طراحی سایت دانشگاهی hostcode 0 71 03-08-2017، 04:51
آخرین ارسال: hostcode
  طراحی سایت اختصاصی hostcode 0 80 03-05-2017، 21:21
آخرین ارسال: hostcode
  ۴ راهبرد مهم در طراحی سایت مناسب و ساده hostcode 0 98 02-28-2017، 22:53
آخرین ارسال: hostcode

پرش به انجمن:


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