آموزش حرکت تصویر پس زمینه باحرکت موس توسط جی کوئری و css

 <div id="background-image"></div>

Css

یک کلاس CSS با نام background-image جهت ایجاد تصویر پس زمینه وجود دارد. همچنین این کلاس موقعیت تصویر را fixed یا ثابت تعیین می کند و طول و عرض تصویر را نیز 100% در نظر میگیرد تا تصویر پس زمینه کل صفحه را در بر بگیرد. 
 

 #background-image {
    background: url('/images/001.jpg');
    position: fixed;
    top: 0;
    width: 100%;
    min-height: 100%;
    height: auto;
}

Jquery

استقاده از جیکوئری برای حرکت دادن تصویر زمینه با حرکت موس بسیار ساده است. کافیست رویداد mousemove() را روی تگ div اضافه کنیم و موقعیت جدید X و Y تصویر زمینه را بر اساس موقعیت فعلی X و Y موس محاسبه کنیم و مقادیر محاسبه را به عنوان موقعیت پس زمینه جدید به عنصر div اختصاص دهیم.

پس مراحل زیر را با دقت انجام میدهیم:

• ابتدا متغیری به نام pixelToMove تعریف می کنیم که مقدار تعداد پیکسل های حرکت موس را در خود نگه می دارد.
• سپس رویداد mousemove را به عنصر div را از طریق شناسه ID جی کوئری اضافه می کنیم.
• بعد از آن ابتدا عرض صفحه و ارتفاع صفحه را دریافت کرده و آنها را در متغیرهای width و height ذخیره کنید. این مقادیر برای محاسبه حرکت پس زمینه در محورهای X و Y استفاده می شود. دو متغیر newValueX و newValueY برای محاسبه حرکت ماوس استفاده می شود. برای محاسبه، از موقعیت فعلی نشانگر ماوس استفاده می کنیم که برای محور X ها تز e.pageX و مقدار نقطه Y را با e.pageY مشخص می کنیم و سپس قبل از ضرب کردن با مقدار متغیر pixelToMove، عرض و ارتفاع را تقسیم کنید. این دو متغیر ما موقعیت جدید بالا و سمت چپ تصویر پس زمینه را به ما نشان می دهند.

در نهایت، ویژگی موقعیت پس زمینه را به مقدار این متغیرها با استفاده از روش CSS جی کوئری تنظیم کنید.
 

 $(document).ready(function(){
            var pixelToMove = 50;
            $('#background-image').mousemove(function(e){
                var width = $(this).innerWidth();
                var height = $(this).innerHeight();
                var newValueX = (e.pageX / width) * pixelToMove;
                var newValueY = (e.pageY / height) * pixelToMove;
                $(this).css('background-position', newValueX + '%' + ' ' + newValueY + '%');

            })
        })