امروزه طراحی یک نمونه کار حرفه‌ای برای طراحان وب، گرافیست‌ها و عکاسان اهمیت زیادی دارد. کاربران هنگام بازدید از یک نمونه کار، علاوه بر کیفیت تصاویر، به نحوه نمایش آن‌ها نیز توجه میکنند. استفاده از افکت‌های تعاملی مانند هاور (Hover) میتواند تجربه کاربری را جذاب‌تر کند. در این مقاله، به شما یاد میدهیم که چگونه هنگام هاور روی تصویر، افکتی ایجاد کنید که باعث حرکت تصویر شود و جلوه‌ای زیبا به نمونه کارهای شما ببخشد.
افکت هاور روی عکس چیست؟
افکت هاور یکی از تکنیک‌های رایج در طراحی وب است که هنگام قرار گرفتن نشانگر موس روی یک عنصر، تغییری در ظاهر آن ایجاد میشود. این تغییر میتواند شامل بزرگ‌نمایی، تغییر رنگ، شفافیت، یا حرکت تصویر باشد. افکتی که بررسی میکنیم، باعث میشود هنگام هاور کردن روی تصویر، آن به آرامی در جهات مختلف حرکت کند و حس پویایی ایجاد شود.
کاربردهای این افکت
افکت حرکت تصویر هنگام هاور در بخش‌های مختلفی از وب‌سایت قابل استفاده است:
- در نمونه کارهای طراحان وب و گرافیست‌ها برای جلب توجه کاربران
- در فروشگاه‌های اینترنتی برای نمایش بهتر محصولات
- در صفحات گالری و عکاسی برای جلوه‌ی زیباتر
- در وب‌سایت‌های خلاقانه که تعامل کاربر اهمیت دارد
روش پیاده‌سازی افکت حرکت تصویر هنگام هاور با CSS
برای ایجاد این افکت میتوان از CSS استفاده کرد. در ادامه، این روش را بررسی میکنیم
با استفاده از CSS
در این روش، به جای استفاده از تگ <img> برای تصاویر، از خاصیت background-image در CSS استفاده میکنیم. این کار باعث میشود بتوانیم موقعیت تصویر را کنترل کنیم و هنگام هاور، افکت حرکت را روی تصویر پس‌زمینه اعمال کنیم.
توضیح
- background-image: url(‘path/to/your/image.jpg’); تصویر پس‌زمینه را مشخص می‌کند.
- background-size: cover; باعث میشود تصویر کل فضای div را پر کند.
- background-position: center top; موقعیت اولیه تصویر را در بالا تنظیم می‌کند.
- transition: background-position ease-in-out 5s !important; انیمیشنی را اضافه می‌کند که هنگام هاور، تصویر به‌آرامی حرکت کند.
- :hover باعث میشود موقعیت تصویر هنگام قرار گرفتن موس روی آن تغییر کند.
نتیجه‌گیری
افکت حرکت تصویر هنگام هاور یک روش عالی برای افزایش جذابیت بصری نمونه کارهای شماست. این افکت میتواند کاربران را بیشتر درگیر سایت کند و تجربه‌ای تعاملی‌تر ایجاد کند. در این مقاله، روش با CSS را معرفی کردیم. شما میتوانید بسته به نیاز خود، از این روش استفاده کنید و نمونه کارهای خود را حرفه‌ای‌تر نمایش دهید.
