جابجا کردن تصویر پس‌زمینه با حرکت دادن ماوس در Javascript

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۲۲ مهر ۱۳۹۷

در این مطلب قصد داریم با استفاده از CSS و Javascript کاری کنیم زمانی که بر روی تصویر مورد نظر هاور میکنیم و ماوس رو جابجا میکنیم، تصویر پس‌زمینه هم متناسب با اون جابجا بشه و حالت جالبی رو به وجود بیاره.

فرض کنید که یک المنت بصورت زیر دارید:

<div class="element" id="element"></div>

حالا یک پس‌زمینه یا Background برای اون قرار میدیم:

.element {
  width: 300px;
  height: 300px;
  border: 1px solid white;
  background-image: url(big-image.jpg);
  background-size: 1000px;
}

big-image یک تصویر هست که از المنت ما بزرگتره و ما میخوایم با جابجا کردن ماوس بر روی المنت، این تصویر که در پس زمینه قرار داره حرکت کنه تا بتونیم همه جای تصویر پس‌زمینه مشاهده کنیم.

در روش اول با استفاده از Javascript مقدار background-position رو تغییر میدیم. کد زیر رو ببینید:

const el = document.querySelector("#element");

el.addEventListener("mousemove", (e) => {
  el.style.backgroundPositionX = -e.offsetX + "px";
  el.style.backgroundPositionY = -e.offsetY + "px";
});

همونطور که میبینید یک رویداد mousemove برای المنت مورد نظر تعریف کردیم و با هر تغییر مکان ماوس این رویداد فراخوانی میشه و کدهای درون اون اجرا میشه و background-position-x یا افقی برابر با موقعیت افقی ماوس و background-position-y برابر با موقعیت عمودی ماوس میشه و با اینکار تصویر بصورت هماهنگ ولی در جهت مخالف با ماوس حرکت میکنه. یعنی اگر شما ماوس رو به سمت بالا ببرید، تصویر به سمت پایین حرکت میکنه تا حالت زیباتری به وجود بیاد.

خروجی رو میتونین در دموی زیر تست کنید: خب این از روش اول.

روش بعدی اینه که از متغیرهای CSS یا CSS Variables استفاده کنید. برای اینکار در ابتدا کدهای CSS رو بصورت زیر تغییر میدیم:

.element {
  --x: 0px;
  --y: 0px;
  background-image: url(big-image.jpg);
  background-size: 1000px;
  background-position: var(--x) var(--y);
  width: 300px;
  height: 300px;
  border: 1px solid white;
}

میبینید که متغیرهای --x و --y رو تعریف کردیم و به عنوان مقدار اولیه برای اونا 0 پیکسل قرار دادیم. در خط 6 هم با استفاده از متد var از اونا برای background-position استفاده کردیم. پس تا اینجا پس زمینه در موقعیت 0 و 0 قرار دارد.

خب حالا باید با استفاده از Javascript کاری کنیم که هر زمان که ماوس جابجا میشه، این متغیرهای CSS هم به‌روزرسانی بشن تا پس زمینه حرکت کنه. برای اینکار بصورت زیر عمل میکنیم:

const el = document.querySelector("#element");

el.addEventListener("mousemove", (e) => {
  el.style.setProperty('--x', -e.offsetX + "px");
  el.style.setProperty('--y', -e.offsetY + "px");
});

همونطور که میبینید باز هم مانند روش قبل رویداد mousemove رو تعریف کردیم ولی در اینجا از متد setProperty استفاده شده و موقعیت افقی و عمودی ماوس بعنوان مقدار متغیرهای --x و --y قرار داده میشه و باعث میشه که پس زمینه جابجا بشه.

خروجی هم بصورت زیر میشه: خروجی دو روش بالا دقیقا مثل هم هستند. در هر دو روش بالا هیچ انیمیشنی وجود نداره اگر ماوستون رو سریع جابجا کنید، تصویر با حالت سریع و بدی جابجا میشه و حس خوبی رو به کاربر نمیده.

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

خب برای اینکار بجای یک المنت از دو المنت در HTML استفاده میکنیم. بصورت زیر:

<div class="element" id="element">
    <div class="mover" id="mover"></div>
</div>

المنت با کلاس element همیشه ثابت هست و المنت با کلاس mover حرکت میکنه. استایلهای زیر رو برای اونا قرار میدیم:

.element {
  width: 300px;
  border: 1px solid white;
}

.mover {
  width: 300px;
  height: 300px;
  background: url(laptop-screen.png);
  background-size: 800px;
  background-repeat: no-repeat;
  background-position: -30px 40px;
  transform: scale(1);
  transition: background-position 0.25s;
}

.mover.no-more-slidey {
  transition: none;
}

میبینید که یک transition برای background-position با مدت 0.25 ثانیه قرار دادیم. حالا یک کلاس دیگه برای mover بنام no-more-slidey در نظر میگیریم و زمانی که این کلاس اعمال میشه، transition برابر با 0 میشه. کدهای Javascript بصورت زیر قرار میدیم:

var container = document.querySelector("#element");
var mover = document.querySelector("#mover");

container.addEventListener("mousemove", function(e) {
  mover.style.backgroundPositionX = -e.offsetX * 1.8 + "px";
  mover.style.backgroundPositionY = -e.offsetY + 80 + "px";
});

container.addEventListener("mouseenter", function() {
  setTimeout(function() {
    mover.classList.add("no-more-slidey");
    container.removeEventListener("mouseenter");
  }, 250);
});

راه‌های زیاد دیگه‌ای هم برای انجام اینکار وجود داره. مثلا میتونین با تکان دادن SVG ViewBox، استفاده از Canvas و WebGL و ... چنین کاری رو انجام بدین.

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

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

nima

عالی بود فقط ببخشید چجور میشه یه ادیتور عکس برا سایت ساخت

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :