50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

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

  • منتشر شده در تاریخ

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

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

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

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

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

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

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

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

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

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

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

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم
برچسب ها :

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

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