با جادوی CSS در المنتور، تصاویر وب‌سایتتان را به حرکت درآورید و تجربه کاربری پویا و حرفه‌ای ایجاد کنید
✅ وقتی تصاویر سایتتان بی‌روح‌اند
تصور کنید وارد سایتی می‌شوید و همه‌چیز ایستا و بی‌جان است؛ هیچ تصویری حرکت نمی‌کند هیچ چیزی توجه‌تان را جلب نمی‌کند. احتمال زیاد در چند ثانیه سایت را ترک می‌کنید درست است؟
این اتفاق هر روز برای صدها سایت طراحی‌شده در المنتور می‌افتد. اما خوشبختانه «جادوی CSS» می‌تواند این مشکل را به زیبایی حل کند. بدون نیاز به حتی یک خط کدنویسی پیچیده می‌توانید تصاویر در وب‌سایت خود را زنده کرده و تعامل کاربر را چند برابر کنید. در این مقاله آموزش میدهیم چگونه با استفاده از CSS در المنتور تصاویر سایت را به حرکت درآورید و نه فقط ظاهر سایت بلکه تجربه کاربری نرخ ماندگاری و حتی فروش خود را افزایش دهید.
✅ چرا انیمیشن تصاویر در وب‌سایت اهمیت دارد؟
تاثیر حرکت بر احساس کاربر
حرکت دادن تصاویر (Image Animation) باعث می‌شود مخاطب:
بیشتر در سایت بماند (کاهش Bounce Rate)حس تعامل و پویایی بیشتری داشته باشدمحتوای شما را جدی‌تر بگیرد آیا سایت شما خوب «نفس می‌کشد»؟
فضای تنفس در طراحی یعنی تعادل بین سکون و حرکت سایتی که فقط از فونت و رنگ استفاده کند جذابیت کمتری خواهد داشت نسبت به سایتی که المان‌های بصری آن مثل تصویر پس‌زمینه دکمه‌ها یا آیکون‌ها به نرمی حرکت می‌کنند.
✅ المنتور و نقش آن در پیاده‌سازی انیمیشن تصاویر
➖ قابلیت‌های تصویری المنتور
🔹پشتیبانی کامل از CSS سفارشی
🔹امکان افزودن Image Hover Effect
🔹حالت‌های تعاملی مانند Fade, Zoom, Slide
✅ آشنایی با CSS و قدرت آن در "تحرک‌بخشی بصری"
دنیای وب دیگر مجموعه‌ای از صفحات ثابت و بی‌روح نیست. وب‌سایت‌های مدرن، پویا، تعاملی و زنده هستند. وقتی نشانگر ماوس را روی یک دکمه می‌برید و آن به نرمی تغییر رنگ می‌دهد یا وقتی صفحه‌ای را باز می‌کنید و عناصر با حالتی زیبا و چشم‌نواز در جای خود قرار می‌گیرند، شما در حال تماشای “تحرک‌بخشی بصری” هستید. اما چه نیرویی در پشت این جادوی پنهان قرار دارد؟ پاسخ در سه حرف خلاصه می‌شود: CSS.
قابلیت‌های تصویری المنتورپشتیبانی کامل از CSS سفارشیامکان افزودن Image Hover Effectحالت‌های تعاملی مانند Fade, Zoom, Slide
1️⃣ افکت زوم ساده (بزرگنمایی)
selector img {
transition: transform 0.3s ease-in-out; /* برای نرمی حرکت */
}
selector:hover img {
transform: scale(1.1); /* تصویر 10% بزرگ‌تر می‌شود */
}
2️⃣ افکت تغییر شفافیت (Fade)
selector img {
transition: opacity 0.3s ease-in-out;
}
selector:hover img {
opacity: 0.7; /* شفافیت به 70% کاهش می‌یابد */
}
3️⃣ افکت سیاه و سفید شدن به رنگی
selector img {
filter: grayscale(100%); /* تصویر در حالت عادی سیاه و سفید */
transition: filter 0.4s ease;
}
selector:hover img {
filter: grayscale(0%); /* با هاور، رنگی می‌شود */
}
4️⃣ افکت تار شدن (Blur)
selector img {
transition: filter 0.3s ease;
}
selector:hover img {
filter: blur(5px); /* میزان تاری بر حسب پیکسل */
}
5️⃣ افکت افزایش روشنایی (Brightness)
/* افکت روشن‌تر شدن */
selector img {
transition: filter 0.3s ease;
filter: brightness(100%);
}
selector:hover img {
filter: brightness(120%); /* 20% روشن‌تر */
}
/* یا افکت تیره‌تر شدن (مناسب برای نمایش متن سفید روی تصویر) */
selector:hover img {
filter: brightness(60%); /* 40% تیره‌تر */
}
6️⃣ افکت اضافه کردن سایه (Box Shadow)
selector img {
transition: box-shadow 0.3s ease-in-out;
border-radius: 8px; /* کمی گرد کردن گوشه‌ها برای زیبایی بیشتر */
}
selector:hover img {
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* افقی، عمودی، تاری، رنگ سایه */
}
7️⃣ افکت چرخش (Rotate)
selector img {
transition: transform 0.3s ease;
}
selector:hover img {
transform: rotate(5deg); /* چرخش 5 درجه در جهت عقربه‌های ساعت */
}
8️⃣ زوم + چرخش + سایه
selector img {
transition: all 0.4s ease; /* transition روی all برای پوشش همه تغییرات */
border-radius: 8px;
}
selector:hover img {
transform: scale(1.05) rotate(-3deg); /* 5% زوم و 3 درجه چرخش به چپ */
box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.25);
filter: brightness(110%); /* کمی روشن‌تر شدن */
}
✅ روش استفاده در المنتور
برای استفاده از کدهای افکت css در المنتور مراحل زیر را طی میکنیم
1️⃣ ابتدا از قسمت المان های المنتور گزینه تصویر رو انتخاب میکنیم
2️⃣ سپس تصویر خود را اضافه میکنیم
3️⃣ از قسمت پیشرفته به گزینه Custom Css رجوع میکنیم و کد مورد نظر را در کادر css قرار میدهیم
4️⃣در مرحله آخر کلاس css مورد نظر را در کادر ” کلاس های css ” قرار میدهیم
