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

          حمیدرضا 
            بازدید : 5956
          پنجشنبه 26 شهریور 1394
           نظرات (2)
        

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

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

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

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

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

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

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

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

<<<code>>>

<<</code>>>

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

<<<code>>>

<<</code>>>

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

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

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

<<<code>>>

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>

<<</code>>>

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

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

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

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

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

<<<code>>>

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

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

<<</code>>>

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

ارسال نظر برای این مطلب

	این نظر توسط fj در تاریخ 1397/04/23 و 13:12 دقیقه ارسال شده است

			سلام ممنون از آموزش خوبتون لطفا فایل wow.js برای دانلود نمایش داده نمیشه لطفا بذاریدش. ممنون. پاسخ : سلام http://up.toolstheme.ir/view/706208/wow.min.js آدرس فایل جاوااسکریپتی که می خوای

	این نظر توسط رقــــیـــه یـــون در تاریخ 1394/06/28 و 16:06 دقیقه ارسال شده است

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

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2292	snakeeye
طراحی باکس دانلود	6	2446	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	8446	grimboy
انواع قالب اختصاصی	3	2078	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2499	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9008	jack7788