loading...
ابزارها قالب
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 5956 پنجشنبه 26 شهریور 1394 نظرات (2)

در مطلب قبلی در مورد ایجاد انیمیشن هایی که وقتی اسکرول به آن ها می رسد ، اجرا می شوند ، توضیحاتی دادم. با خواندن مطلب اجرای انیمیشن 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>>>

 

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

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

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

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

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


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

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 8
  • تعداد اعضا : 3246
  • آی پی امروز : 269
  • آی پی دیروز : 317
  • بازدید امروز : 392
  • باردید دیروز : 433
  • گوگل امروز : 3
  • گوگل دیروز : 3
  • بازدید هفته : 1,261
  • بازدید ماه : 6,715
  • بازدید سال : 83,637
  • بازدید کلی : 1,901,343
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص