تغییر پس زمینه تصویر در jQuery

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

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

در این آموزش , ما تصویر پس زمینه را با اسکرول کردن به سمت عمودی یا افقی و بصورت انیمیشن نمایش می دهیم.این کار را با تغییر در موقعیت x یا y تصویر پس زمینه بر اساس جهت انتخاب شده انجام میدهیم.

تغییر پس زمینه تصویر در jQuery

کد HTML برای انیمیشن پس زمینه

این کد شامل تصویر پس زمینه و کنترل های تغییر مسیر حرکت انیمیشن است.

تغییر پس زمینه تصویر در jQuery

این کد شامل دو تابع است . تابع scrollBg() برای تغییر موقعیت (position) تصویر با استفاده از جی کوئری استفاده شده است . در این تابع از setInterval() در جاوااسکریپت برای تغییر پوزیشن در هر ۱۰ ثانیه بهره بردیم.

از این تابع برای تغییر مسیر پس زمینه انیمیشن شده , بهره بردیم.

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

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

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

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

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

دوره های آموزشی