آموزش افکت های اسکرولی با پلاگین Animate Scroll Effect

افکت اسکرولی چیست ؟

یکی از جدیدترین افکت هایی که بسیاری از وب سایت های فانتزی از آن استتفاده میکنند , پلاگین افکت اسکرولی می باشد .

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

این پلاگین دارای 8 افکت زیبا میباشد که توسط آموزش اختصاصی زیر میتوانید از آن استفاده نمایید .

و اما آموزش :

1 – در ابتدا شما نیاز به کتابخانه جی کوئری دارید که میتوانید از سایت رسمی جی کوئری به نشانی www.jquery.com , آخرین نسخه را دانلود نمایید .

2 – سپس باید آخرین نسخه پلاگین Animate Scroll Effect را ار وب سایت رسمی آن دانلود نمایید . برای دانلود کلیک کنید .

در فایل دانلودی بالا , 2 فایل وجود دارد ( یک css به نام animate.css و یک js به نام viewportchecker.js ) که با یک فایل jquery سه فایل می باشد که باید به وب سایت خود ضمیمه نمایید .

به صورت زیر :

<script src="آدرس فایل جی کوئری"></script>
<script src="آدرس فایل viewportchecker"></script>
<link rel="stylesheet" href="آدرس فایل animate.css">

3 – حال باید کد های زیر را در css سایت خود اضافه نمایید :

.hidden{
     opacity:0;
}
.visible{
     opacity:1;
}

4 – و در آخر کد های جی کوئری زیر را به وب سایت خود اضافه نمایید ( ترجیحا قبل از بسته شدن تگ </body> ) :

jQuery(document).ready(function() {
    jQuery('selector').addClass("hidden").viewportChecker({
        classToAdd: 'visible animated vms',
        offset: 100
       });
});

نکته 1 : به جای selector در کد بالا , باید آی دی , کلاس یا انتخابگر دیگری از css را وارد نمایید . مثلا اگر میخواهید تمامی div های دارای این حالت بشوند , بنویسید (div) . یا مثلا اگر میخواهید فقط تگ هایی که کلاس vms دارند , این حالت را داشته باشند , بنویسید (vms.)

نکته 2 : به جای کلمه vms , باید یکی از کلمات زیر را وارد نمایید که هر کدام یک حالت افکت می باشد .

fadeIn : حال نمایش آهسته .
bounceInLeft : حرکت انیمیشنی از سمت چپ
bounceInRight : حرکت انیمیشنی از سمت راست 
bounceInUp : حرکت انیمیشنی از سمت پایین به بالا
fadeInDown : حرکت انیمیشنی آهسته از بالا به پایین 
fadeInUp : حرکت انیمیشنی آهسته از پایین به بالا 
lightSpeedIn : حرکت انیمیشنی سریع از راست 
flipInX : حالت انیمشنی کتابی

دموی پلاگین Animate Scroll Effect

پخش اختصاصی

آموزش و گرداوری : وحید مجیدی