خدمت شما کاربران محترم وبسایت ilikephp و علاقه مندان به آموزش های ویژه طراحی وب سلام عرض می کنم.
در آموزش امروز شما با نحوه حرکت دادن تصویر پس زمینه با حرکت موس توسط رویداد mouseover() در جی کوئری آشنا خواهید شد.
پیش نیازها
برای یادگیری این بخش لازم است تا با مفاهیم زیر آشنایی داشته باشید:
آموزش حرکت تصویر با حرکت موس
اضافه کردن انیمیشن تعاملی نگاهی تازه را به هر وبسایت از دید کاربر می بخشد. استفاده از تصویر پس زمینه برای پوشش صفحه زمینه وب یک امر رایج و پرکاربرد در وبسایت ها است. در آموزش امروز قصد داریم تا یک اثر جالب بر روی تصویر پس زمینه با کمک CSS و جی کوئری خلق کنیم. یعنی حرکت پس زمینه با حرکت موس توسط CSS و جی کوئری.
برچسب های HTML
برای شروع ابتدا یک تگ div خالی با شناسه id="background-image" ایجاد می کنیم. این شناسه را برای کنترل تصویر پس زمینه این تگ در 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 + '%'); }) })
