تغییر پس زمینه با اسکرول در jQuery

  • آپدیت شده در تاریخ

تغییر پس زمینه با اسکرول در jQuery

در این آموزش, قصد داریم به شما نحوه ساخت انیمیشن تغییر پس زمینه با اسکرول در jQuery را نشان بدیم. در مقاله قبلی, نحوه تغییر تصویر پس زمینه را بصورت انیمیشنی دیدیم.

در این مثال, ما از تابع animate() در جی کوئری برای ایجاد افکت انیمیشن استفاده می کنیم. ما آرایه ای از رنگ ها داریم که با اسکرول شدن صفحه, یک انیمیشن پس زمینه را بصورت gradient می سازیم.

کد HTML برای اعمال انیمیشن

تگ DIV زیر دارای یک id برای مشخص کردن اون به عنوان سلکتور برای ایجاد انیمیشن jQuery , است.

تغییر پس زمینه با اسکرول در jQuery

اسکریپت جی کوئری زیر با اسکرول صفحه فراخوانی و ایندکس background-Color رو تغییر می دهد. ایندکس تغییر داده شده برای انتخاب کد رنگی HEX از آرایه استفاده شده است. (تغییر کد رنگی Hex به rgb)

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

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

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

موفق و پیروز باشید.

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
برچسب ها :
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۴)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. مصطفی ۳۰ دی ۱۳۹۹

    سلام وقتتون بخیر
    ممنون از سایت خیلی خوبتون.
    لطف میکنید تغییر رنگ صفحه این سایت رو ببینین و کد رو برام طوری تغییر بدین که شبیه این بشه
    واقعا ممنون میشم.
    https://www.everyday-needs.com

    پاسخ
    1. حسن شفیعی ۳۰ دی ۱۳۹۹

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

      پاسخ
  2. mohammad ۶ اردیبهشت ۱۳۹۷

    سلام داداش. این کد جدیدا که میذاری خیلی خوبن دستت درد نکنه.
    ی کدهایی هست توی بعضی صفحه های وب که وقتی وارد صفحه میشی یه حالت اسکن کردن داره نمیدونم اسمش چیه ولی خیلی با حاله.مثل تو فیلما حالت اسکن و شناسایی و این جور چیزارو داره.
    یه کدهایی هم هست که عین ماتریکس صفر و یک توی صفحه حرکت می کنه. اسماشون نمیدونم چیه .
    یا مثلا از اینا که وقتی صفحه رو باز می کنی مثلا می خوایم بنویسیم welcom . بعد مثلا اول w میاد یه ثانیه بعد e میاد و …
    اگه میشه این سه مدل کد هم بذاری که خیلی عالی میشه.یا اسمشونو بگی و یه لینکی چیزی بدی ببینم چطوری درست میشه. دمت گرم 🙂

    پاسخ
    1. حسن شفیعی ۶ اردیبهشت ۱۳۹۷

      سلام . بله حتما به مرور این کد ها رو هم قرار میدیم تا نهایت استفاده رو ببرید .
      موفق باشید.

      پاسخ
دوره های آموزشی