آموزش افکت اسکرولی css درسایت

آخرین بروز رسانی: مهر ۲۲, ۱۳۹۵

استفاده از آموزش افکت اسکرولی css درسایت های فلت از این آموزش افکت اسکرولی بسایر ساده است . آموزش افکت اسکرولی css درسایت.

افکت اسکرولی scroll-effect

افکت اسکرولی scroll-effect

فقط کافیه فایل css و js زیر را دانلود کنید و به سند html خودتون در تگ head متصل کنیم و با استفاده از یک کد جی کوئری اون رو فراخوانی کنید .

چطور ؟ با تیم طراحی سایت در اصفهان همراه باشید تا بسادگی افکت اسکرولی را یاد بگیرید.

اول فایل اسکرول افکت را از scroll-effects_2دانلود کنید.

قبل از استفاده از کد جی کوئری باید دوکد CSS رو به style.css قالب سایتمان اضافه کنیم این دو کد حالت رویداد قبل و بعد از لود عنصر مارو توسط انیمیشن تایین میکنه کد اول عنصر مارو در حین لود مخفی میکنه وکد دوم عنصر مارو پس از لود و اسکرول نمایان میکنه

.hidden{ opacity:0;}
.visible{  opacity:1;}
حال با استفاده از کد فراخوانی کتابخانه را اجرا کنید . شما باید کلاس یا آیدی باکس مورد نظری را که میخواهید با افکت لود بشود را وارد کنید همچنین میتونید به جای class یا id از div استفاده کنید تا تمام باکس های div داخل صفحه با افکت به صورت اسکرولی لود بشوند .
<script type=“text/javascript”>
jQuery(document).ready(function() {
jQuery(‘.post’).addClass(“hidden”).viewportChecker({
    classToAdd: ‘جای قرار گیری افکت’,
    offset: 100    
   });  
});            
</script>
جای قرار گیری افکت:

برای تغییر  باید از طریق لاین ClassToAdd افکت مورد نظرتون رو وارد کنین:

fadeInDown : حرکت انیمیشنی آهسته از بالا به پایین

fadeInUp : حرکت انیمیشنی آهسته از پایین به بالا

lightSpeedIn : حرکت انیمیشنی سریع از راست

flipInX : حالت انیمشنی کتابی

fadeIn : حال نمایش آهسته .

bounceInLeft : حرکت انیمیشنی از سمت چپ

bounceInRight : حرکت انیمیشنی از سمت راست

bounceInUp : حرکت انیمیشنی از سمت پایین به بالا

برای اینکه بخواهید چندین کلاس و یا ایدی رو در این کد قرار بدید باید بعد از کلاس یا ایدی بعدی یک کاما بذارید و بعد ایدی یا کلاس بعدی رو قرار بدید
(.post,.logo,#slider)
نام دایوتون را بجای کلاس دات پست در کد های بالا قرار دهید.
اگر انجام دادین و چیزی ندیدین

کدها رو در پایین صفحه قبل از تگ قرار بدید حتما کار میکند(اگر کار نکرد مشکل از تداخل پلاگین‌های صفحه مورد نظرتون هست)
به این صورت

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

jQuery(document).ready(function() {
jQuery(‘img’).addClass(“hidden”).viewportChecker({
classToAdd: ‘visible animated visible animated flipInX’,
offset: 100});});

منبع : websilent.com

مطالب مرتبط

موقتا امکان ارسال ديدگاه وجود ندارد

موقتا امکان ارسال ديدگاه وجود ندارد

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2017