آموزش استفاده از افزونه جاوا اسکریپت wow

کدَک ها (کد کوچک) ، سطح متوسط ،
3213 بازدید
آموزش استفاده از افزونه جاوا اسکریپت wow
طرز استفاده از افزونه ی wow برای ایجاد انیمیشن در هنگام رسیدن اسکرول صفحه به مکان شی مورد نظر در صفحه

در مطلب قبلی در مورد ایجاد انیمیشن هایی که وقتی اسکرول به آن ها می رسد ، اجرا می شوند ، توضیحاتی دادم. با خواندن مطلب اجرای انیمیشن css با حرکت اسکرول شما می توانید بدون استفاده از هیچ گونه افزونه ی جاوا اسکریپتی ، این کار را انجام دهید. یعنی کاری کنید که انیمیشن های صفحه هنگامی آشکار شوند که اسکرول صفحه به شی مورد نظر می رسد. اما شاید شما برایتان سخت باشد تا آموزش قبلی را درک کنید. برای همین من می خواهم در این مطلب ، همان کار را با استفاده از افزونه ی wow انجام دهم. این کار خیلی ساده تر نیست اما امتیازاتی دارد که به آن ها اشاره خواهم کرد.

اول برای درک بهتر این آموزش صفحه ی زیر که صفحه ی اصلی افزونه ی wow است را ببینید:

صفحه ی اصلی افزونه ی wow

با پایین آوردن صفحه ، تصاویر و متن هایی را مشاهده می کنید که به شکل های مختلف نمایان می شوند. این همان کاری است که ما می خواهیم انجام دهیم.

با ورود به صفحه ی زیر می توانید آموزشات انگلیسی مربوط به این افزونه را مشاهده کنید. مسلما آموزشات انگلیسی موجود در سایت افزونه ی wow کامل تر از توضیحات من است. اما من سعی کرده ام تا حد ممکن از توضیح مسائل غیر لازم خودداری کنم و فقط به مسائل کاربردی بپردازم.

صفحه ی آموزش انگلیسی

طرز نصب افزونه در صفحه

ابتدا باید فایل wow-js-plugin-animate.css را در صفحه بارگذاری کنید. برای این کار کد زیر را در بین تگ <head></head> قرار دهید.

<<<code>>>

<link rel="stylesheet" href="http://up.toolstheme.ir/view/706161/wow-js-plugin-animate.css" />

<<</code>>>

بعد از این کار شما باید فایل جاوا اسکریپت مربوط به این افزونه را نیز در صفحه ی خود بارگذاری کنید. برای این کار کد زیر را در بین تگ <head></head> قرار دهید.

<<<code>>>

<script type="text/javascript" src="http://up.toolstheme.ir/view/706208/wow.min.js"></script>

<<</code>>>

تنظیمات اضافه

بعد از این که فایل جاوا اسکریپت این افزونه را در صفحه بارگذاری کردید ، باید با استفاده از یک متد ، آن را فعال کنید. شما می توانید برای این متد ، تنظیماتی را مشخص کنید.

فعال کردن افزونه به صورت ساده و با مقادیر پیشفرض:

<<<code>>>

<script>

   new WOW().init();

</script>

<<</code>>>

کد بالا را بعد از کدی که فایل جاوا اسکریپت را بارگذاری می کند قرار دهید.

فعال کردن افزونه به با تنظیمات دلخواه:

<<<code>>>

var wow = new WOW

(

   {

      boxClass: "wow", // نام کلاس اشیایی که باید افزونه روی آن ها فعال باشد

      animationClass: "animated", // کلاس اشیایی که انیمیشن در آن ها اجرا شده است

      offset: 0, // میزان اختلاف بین پایین صفحه و بالای شی

      mobile: true, // فعال یا غیر فعال برای موبایل

      live: true // تشخیص اشیا جدید ایجاد شده در صفحه

   }

);

wow.init();

<<</code>>>

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

استفاده از افزونه در کد های صفحه

از این به بعد تمام توضیحات بر اساس مقادیر پیشفرض افزونه هستند.

خیلی ساده شما می توانید با دادن نام کلاس wow به هر شیئی ، این افزونه را برای آن شی فعال کنید. یعنی شی به گونه ای می شود که وقتی اسکرول صفحه به اندازه ی مورد نظر پایین آمد و به شی رسید ، انیمیشنی روی آن اعمال می شود. این افزونه انیمیشن های متنوعی برای اعمال روی شی دارد. شما می توانید این انیمیشن ها را در صفحه ی زیر ببینید.

انواع انیمیشن های موجود

در صفحه ی بالا شما می توانید با استفاده از لیست موجود ، انیمیشنی را انتخاب کنید و طرز نمایش آن را ببینید. سپس باید نام آن انیمیشن را از لیست بردارید و در کنار wow به عنوان نام کلاسی دیگر ، آن را به شی مورد نظر نسبت دهید. با دیدن مثال زیر همه چیز را متوجه می شوید:

<<<code>>>

<div class="wow zoomInUp">

   هر چیزی ...

</div>

<<</code>>>

قسمت قرمز رنگ ، اجرا کننده ی این افزونه روی تگ بالا (div) است. (هر تگ دیگری نیز می تواند باشد) اگر مقدار پیشفرض "boxClass" را در فعال سازی افزونه تغییر داده باشید باید مقدار جایگزینی خود را در اینجا استفاد کنید.

قسمت آبی رنگ ، نوع انیمیشن است که من آن را از لیست صفحه ای که معرفی کردم انتخاب کردم. و آن را در بالا نوشتم. شما می توانید هر کدام از انیمیشن هایی که در لیست صفحه ی "انواع انیمیشن های موجود" وجود دارد را به جای متن آبی استفاده کنید.

تعدادی از تنظیمات اضافه در استفاده از افزونه

در این افزونه ، تنظیمات اضافی زیر وجود دارد:

  • data-wow-duration : این مقدار مدت زمان اجرای انیمیشن را مشخص می کند
  • data-wow-delay : این مقدار مدت زمان وقفه ای که باید بعد از رسیدن اسکرول اعمال شود را مشخص می کند
  • data-wow-offset : انحراف شی از پایین صفحه (منظور همان فاصله ی پایین صفحه تا بالای شی است)
  • data-wow-iteration : تعداد دفعات اجرای انیمیشن را مشخص می کند

<<<code>>>

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">

</section> // اجر با وقفه ی 5ثانیه و طول انیمیشن 2ثانیه

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">

</section> // اجرای 10باره ی انیمیشن و با انحراف 10

<<</code>>>

 

خب! آموزش تمام شد. شاید کمی پیچیده به نظر بیاید ولی من این آموزش را در سطح کدک سطح متوسط می بینم و آن را در همین موضوع قرار داده ام.

رمز تمام فایل های فشرده
رمز فایل فشرده است.