پرتال تیم آسان وب

دوشنبه 16 تیر 1399

پرتال تیم آسان وب

ایمیل:
vatan-design

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

آموزش حرکت تصویر پس زمینه با حرکت موس توسط جی کوئری و css
  • شناسه محصول
    99
  • Professional Product
  • Easy Install
  • Iranian Product
  • Verified Product
ارسال شده در 08 / 10 / 1398
خدمت شما کاربران محترم وبسایت ilikephp و علاقه مندان به آموزش های ویژه طراحی وب سلام عرض می کنم.
در آموزش امروز شما با نحوه حرکت دادن تصویر پس زمینه با حرکت موس توسط رویداد mouseover() در جی کوئری آشنا خواهید شد.پیش نیازها

برای یادگیری این بخش لازم است تا با مفاهیم زیر آشنایی داشته باشید:

آموزش HTML و CSS
آموزش جی کوئری


آموزش حرکت تصویر با حرکت موس

اضافه کردن انیمیشن تعاملی نگاهی تازه را به هر وبسایت از دید کاربر می بخشد. استفاده از تصویر پس زمینه  برای پوشش صفحه زمینه وب یک امر رایج و پرکاربرد در وبسایت ها است. در آموزش امروز قصد داریم تا یک اثر جالب بر روی تصویر پس زمینه با کمک 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 + '%');

            })
        })

آموزش کار با پلاگین Affix در بوت استرپ آموزش آپلود فایل در php همراه با امنیت چطور می توانیم یک برنامه نویس فریلنسر خوب باشیم؟ آموزش ویژوال بیسیک - قسمت سوم اموزش ویژوال بیسیک - قسمت دوم
محصولات مرتبط
ورود به فروشگاه مشاوره تلفنی رایگان