نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 2240
تاریخ بروزرسانی ۴ دی ۱۳۹۶

آموزش افکت اسکرولی 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

مقالات مرتبط
قیف فروش
قیف فروشت رو طراحی کن !

روزی که محتوا های این سری از وب یار را برای من ارسال کردند ، با دیدن این عنوان های جذاب ، با خودم گفتم که تمام این سری از محتوا ها را باید خودم بنویسم ؛ چراکه اگر اون رو درست بشناسید و از این روش استفاده کنید ، به تنهایی این توانایی را دارد که سیستم بازاریابی و فروش شما رو متحول کند.در…

اپلیکیشن
5 تا از بهترین زبان های برنامه نویسی برای توسعه موبایل اپلیکیشن ها

برنامه های موبایل در چه ساختار هایی طبقه بندی می شوند؟آیا می توان با هرزبانی برای هر پلتفرمی ، دست به توسعه اپلیکیشن زد؟بهتره از چه زبان برنامه نویسی برای توسعه اپ های موبایل استفاده کنیم؟ اپلیکیشن های native اپلیکیشن های hybrid زبان های محبوب و کارآمد برنامه موبایل 1.Javascript در اپلیکیشن های مولتی پلتفرم 2.جاوا در اپلیکیشن های اندرویدی 3. Swift در اپلیکیشن های…

5 تا از بهترین و ارزان ترین روش های تبلیغاتی

شما هم این روز ها ، با چالش فروش پایین و کمبود مشتری روبه رو شدید؟تازه کسب و کار خود را راه انداختید و به دنبال بهترین و ارزان ترین روش های تبلیغاتی هستید؟تازه وارد هستید و کم هزینه بودن تبلیغات ، برای شما بسیار مهم است؟بستر های تبلیغاتی را نمی شناسید؟تبلیغات را بی فایده می دانید؟ اصلا ارزان ترین روش های تبلیغاتی برای شما…