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



visibility  
mode_comment   ۰

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

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

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

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

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

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

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

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

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

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

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

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

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

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

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

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

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

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

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

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.