در این آموزش, قصد داریم به شما نحوه تغییر پس زمینه تصویر بصورت انیمیشن را با استفاده از jQuery و CSS نشان بدیم . در آموزش قبلی , نحوه بارگذاری خودکار در jQuery بعد از لود صفحه و در یک زمان مشخص را دیدیم.
در این آموزش , ما تصویر پس زمینه را با اسکرول کردن به سمت عمودی یا افقی و بصورت انیمیشن نمایش می دهیم.این کار را با تغییر در موقعیت x یا y تصویر پس زمینه بر اساس جهت انتخاب شده انجام میدهیم.
کد HTML برای انیمیشن پس زمینه
این کد شامل تصویر پس زمینه و کنترل های تغییر مسیر حرکت انیمیشن است.
|
1 2 3 |
<div id="scroll-bg"><h2>Scrolling Background</h2></div> <input type="hidden" id="direction" value="y" /> <input type="button" id="btnAction" value="Change Direction" onClick="changeDirection();" /> |
تغییر پس زمینه تصویر در jQuery
این کد شامل دو تابع است . تابع scrollBg() برای تغییر موقعیت (position) تصویر با استفاده از جی کوئری استفاده شده است . در این تابع از setInterval() در جاوااسکریپت برای تغییر پوزیشن در هر ۱۰ ثانیه بهره بردیم.
|
1 2 3 4 5 6 7 8 9 |
function scrollBg() { var x = 0; var y = 0; window.setInterval(function() { $("#scroll-bg").css("backgroundPosition", x + "px" + " " + y + "px"); if($("#direction").val()=='x') x--; else y--; }, 10); } |
از این تابع برای تغییر مسیر پس زمینه انیمیشن شده , بهره بردیم.
|
1 2 3 4 5 |
function changeDirection() { if($("#direction").val() == 'y') $("#direction").val('x'); else $("#direction").val('y') scrollBg(); } |
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
