ورود به سایت

ثبت نام در سایت

Registration confirmation will be e-mailed to you.

فراموشی رمز

10 − 9 =

بستن
بستن

چگونگی ساخت افکت های اسکرولی با CSS و Jquery

چگونگی ساخت افکت های اسکرولی با CSS و Jquery

jQuery css 1

چگونگی ساخت افکت های اسکرولی با CSS و Jquery

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

این نوع افکت با اسکرول انجام میشه یعنی وقتی که اسکرول به باکس مورد نظر رسید شروع به اجرا کنه این نوع افکت در پلاگین Lazy Load خیلی کاربردی بود و باعث کاهش حجم سایت میشد ولی Lazy Load مشکلات خیلی زیادی داشت که این کتابخانه این مشکلات رو نداره و به راحتی میتونید از اون استفاده کنید اون هم تنها با چند کلیک ! افکت های این کتابخانه خیلی متنوع است و حدود ۶ عدد افکت خاص داره که پیشنهاد میکنم برای درک بهتر دموی آنلاین اون رو مشاهده کنید .

 

مشاهده دموی کتابخانه افکت اسکرولی Scroll Effects

aimated-scroll-effects-jquery-plugin

 

چرا باید از افکت اسکرولی استفاده کنیم ؟

این کتابخانه به غیر از زیبایی عالی که داره در سرعت لود وب سایت هم تاثیر خیلی خوبی میذاره بدین صورت وقتی که سایت ما در حالی باز شدن و بارگذاری هستش عناصری که در زیر اسکرول قرار دارند لود نخواهند شد تا وقتی که روی اونها اسکرول بشه در این موقع عناصر مورد نظر شبیه ای جکس (Ajax) لود میشن .

مطالب مرتبط


گام 1 - آموزش نصب و استفاده :

 

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

امکان تغییر افکت ها به سادگی قابل انجامه هر افکتی یک شناسه مخصوصی داره که میتونید هر موقع مایل بودید افکت رو تغییر بدید . در خود دموی این کتابخانه هیچ جایی واسه دانلود فایل های js  و css و هیچ چگونه آموزش استفاده ایی وجود نداره که ما آموزش نصب رو به صورت اختصاصی برای شما قرار دادیم .

 

اول از همه باید فایل های JS و CSS3 رو دانلود کرده و به سند HTML خودتون متصل کنید – دریافت با لینک مستقیم 

 

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

cod

 

در مرحله دوم با استفاده از کد فراخوانی زیر کتابخانه رو اجرا کنید . شما باید کلاس یا آیدی باکس مورد نظری رو که میخواهید با افکت لود بشه رو وارد کنید.

همچنین میتونید به جای کلاس یا ایدی از div استفاده کنید تا تمام باکس های div داخل صفحه با افکت به صورت اسکرولی لود بشن . البته من این روش رو اصلا پیشنهاد نمیکنم .

cod 2 

حالا اگر بخواهید افکت اجرایی رو تغییر بدید باید از طریق لاین ClassToAdd شناسه افکت مورد نظرتون رو وارد کنید .

 

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

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

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

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

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

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

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

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

 

نکته کاربردی : برای اینکه بخواهید چندین کلاس و یا ایدی رو در این کد قرار بدید باید بعد از کلاس یا ایدی بعدی یک کاما بذارید و بعد ایدی یا کلاس بعدی رو قرار بدید به مثلا زیر توجه کنید :

3

 

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

 

موفق باشید.

اطلاعات مطلب

  • طراحی وب
  • 1,348 بازدید
  • blankblankblankblankblank (3 votes, average: 5,00 out of 5)
    blankLoading...
  • آخرین ویرایش توسط : درهمی - یکشنبه, 20 ژانویه 19, 12:53 ب.ظ
  • دریافت فایل

دیدگاه کاربران

  1. سامان - 2017/12/22 - 4:04 ب.ظ
    • هادی خانزاده - 2017/12/22 - 5:34 ب.ظ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

بهترین علوم و دانش برای شما گردآوری میشه

آخرین های آیا میدانید

از همه جا براتون مطلب داریم لطفا کلیک کنید

مطالب برگزیده

موضوعات مهم سایت

مطالب محبوب