031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » مطالب عمومی » آموزش افکت اسکرولی css درسایت

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

۲۴ام آذر ۱۳۹۴
پشتیبانی وب یار
دیدگاه‌ها برای آموزش افکت اسکرولی css درسایت بسته هستند
72

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

تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
پشتیبانی وب یار

مطالب مرتبط

طراحی سایت فرهنگی سایت کودک

طراحی سایت فرهنگی کودک خلاق

طراحی سایت فرهنگی کودک خلاق طراحی سایت اختصاصی کودک خلاق با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت وب یار می باشد. طراحی سایت فرهنگی کودک خلاق برای مشتریان عزیزی که کسب و کارشان در حوزه های فرهنگی و خدماتی است بسیار مناسب می باشد. آدرس سایت جهت مشاهده تمامی […]

طراحی سایت بازرگانی ایراکو

طراحی سایت اختصاصی بازرگانی ایراکو طراحی قالب سایت اختصاصی بازرگانی ایراکو با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت و سئو سایت وب یار است. این سایت در زمینه ی بازرگانی و تجارت با عراق فعالیت دارد. طراحی سایت بازرگانی ایراکو برای مشتریان عزیزی که کسب و کارشان در حوزه های […]

طراحی سایت خدماتی کانون ایران فردا

طراحی سایت خدماتی کانون ایران فردا

طراحی سایت خدماتی کانون ایران فردا طراحی سایت اختصاصی کانون ایران فردا با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت وب یار می باشد. این سایت در زمینه ی معرفی متخصصین، ثبت آگهی و معرفی مشاغل فعالیت دارد. همچنین در سایت کاف ( کانون ایران فردا ) فروشگاه اینترنتی راه […]

طراحی سایت اختصاصی آجیل بازار

طراحی سایت خدماتی آجیل بازار

طراحی سایت خدماتی آجیل بازار طراحی سایت اختصاصی آجیل بازار با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت و سئو سایت وب یار است. این سایت در زمینه ی تولید و توزیع عمده پسته و خشکبار فعالیت دارد. طراحی سایت خدماتی آجیل بازار برای مشتریان عزیزی که کسب و کارشان […]

ارسال دیدگاه

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

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