طراحی دکمه سبد خرید شناور در المنتور — از صفر تا حرفه‌ای

5/5 - (1 امتیاز)

آموزش طراحی دکمه سبد خرید شناور در المنتور (نمایش با هاور)

در این آموزش یاد می‌دهم که چطور دکمه «افزودن به سبد خرید» رو فقط وقتی کاربر روی کارت محصول هاور می‌کنه، با یک انیمیشن نرم و جذاب ظاهر کنی. این تکنیک هم ظاهر سایت رو مینیمال‌تر می‌کنه، هم نرخ کلیک رو بالا می‌بره. اگر فروشگاه آنلاین داری و با المنتور ساخته شده، این آموزش رو از دست نده ، در این آموزش با چند خط کد css میتونی با یک افکت ساده، تجربه خرید سایتت رو حرفه‌ای‌تر کنی ، این CSS یک دکمهٔ پوششی را در پایین کارت پنهان می‌کند و هنگام هاور کارت آن را با انیمیشن بالا می‌آورد؛ از transform برای جابجایی، opacity و visibility برای نمایش/مخفی‌سازی و transition برای نرم‌سازی تغییرات استفاده شده است.

.ideapardazesh-cart {
    position: relative;
    overflow: hidden; 
}

#addkalabtncart {
    position: absolute; 
    bottom: 0; 
    width: 100%;
    z-index: 10; 
    transform: translateY(100%); 
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s;

    padding: 10px; 
    text-align: center;
    background-color: rgba(0, 0, 0, 0.7);
}

.ideapardazesh-cart:hover #addkalabtncart {
    transform: translateY(0); 
    opacity: 1;
    visibility: visible;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

.ideapardazesh-cart {

position: relative;

overflow: hidden;

}

#addkalabtncart {

position: absolute;

bottom: 0;

width: 100%;

z-index: 10;

transform: translateY(100%);

opacity: 0;

visibility: hidden;

transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s;

padding: 10px;

text-align: center;

background-color: rgba(0, 0, 0, 0.7);

}

.ideapardazesh-cart:hover #addkalabtncart {

transform: translateY(0);

opacity: 1;

visibility: visible;

}

ساختار کلی و هدف

این قطعه کد برای یک کارت محصول طراحی شده که داخل آن یک دکمه (با شناسه #addkalabtncart) به صورت مخفی در پایین قرار دارد و وقتی کاربر ماوس را روی کارت می‌برد، دکمه با حرکت و محو شدن ظاهر می‌شود. این الگو معمولاً برای افکت‌های شناور و نمایش کنترل‌ها روی کارت‌ها استفاده می‌شود.

توضیح `.ideapardazesh-cart`

position: relative; این قانون باعث می‌شود که فرزندانی که position: absolute دارند (مثل #addkalabtncart) نسبت به این عنصر موقعیت‌دهی شوند؛ یعنی نقطهٔ مرجع آن کارت خواهد بود.
overflow: hidden; محتوایی که از محدودهٔ کارت بیرون بزند (مثلاً دکمهٔ جابجا شده) قطع می‌شود و دیده نخواهد شد؛ این کار از نمایش بخش‌های خارج از کارت هنگام انیمیشن جلوگیری می‌کند.

توضیح `#addkalabtncart` (حالت پیش‌فرض مخفی)

position: absolute; bottom: 0; width: 100%; دکمه در پایین کارت چسبیده و عرضش تمام عرض کارت است.
z-index: 10; دکمه در لایه‌ای بالاتر قرار می‌گیرد تا روی سایر محتوا دیده شود.
transform: translateY(100%); دکمه به اندازهٔ 100% ارتفاع خودش به سمت پایین منتقل شده و عملاً بیرون از دید قرار می‌گیرد؛ استفاده از transform برای حرکت باعث می‌شود انیمیشن روان و سخت‌افزاری-شتاب‌دار باشد.
opacity: 0; visibility: hidden; علاوه بر جابجایی، دکمه کاملاً شفاف و از نظر دسترسی/رندر پنهان است؛ visibility کمک می‌کند که عنصر از جریان بصری حذف شود اما همچنان فضایش (در این حالت با absolute) مدیریت شود.
transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s; تغییرات در transform و opacity (و visibility) طی ۰.۴ ثانیه با تابع زمانی ease نرم می‌شوند تا حرکت و محو شدن تدریجی رخ دهد؛ توجه کنید که برخی خواص مثل display قابل transition نیستند و برای نمایش/مخفی‌سازی معمولاً از ترکیب opacity/visibility یا جاوااسکریپت استفاده می‌شود.
padding: 10px; text-align: center; background-color: rgba(0, 0, 0, 0.7); ظاهر دکمه: فاصله داخلی، متن وسط‌چین و پس‌زمینهٔ نیمه‌شفاف سیاه برای خوانایی روی محتوای کارت.

توضیح حالت هاور

.ideapardazesh-cart:hover #addkalabtncart { transform: translateY(0); opacity: 1; visibility: visible; } وقتی ماوس روی کارت قرار می‌گیرد، دکمه به موقعیت اصلی‌اش بازمی‌گردد (translateY(0))، شفافیت کامل می‌گیرد (opacity: 1) و قابل مشاهده می‌شود (visibility: visible)؛ به دلیل transition تعریف‌شده، این تغییرات به صورت انیمیشنی و نرم اجرا می‌شوند.

نوشته‌های تازه

دیدگاهتان را بنویسید لغو پاسخ

ایده پردازش

پشتیبانی