אפקטים קטנים עושים הבדל גדול בחוויית משתמש – במיוחד כשמדובר באינטראקציות בסיסיות כמו מעבר עכבר. הקוד הזה יוצר תנועה עדינה שמזיזה אלמנט מעט שמאלה בעת hover, וגורמת לו להרגיש חי, אינטראקטיבי ונעים יותר לעין.
הרעיון פשוט, במצב רגיל מוגדר transition קצר עם פונקציית easing מדויקת, ובמעבר עכבר האלמנט זז ב־translateX ועם אנימציה מעט איטית יותר, מה שנותן תחושה רכה ולא קופצנית.
היתרון המרכזי כאן הוא השליטה בתחושת התנועה:
מצד אחד תגובה מהירה כשנכנסים לאלמנט, ומצד שני יציאה רגועה שמרגישה טבעית.
שימושים נפוצים:
- כרטיסים (Cards) ברשימות
- כפתורים עם דגש אינטראקטיבי
- אלמנטים בליסטים כמו Icon List או Features
שימו לב להגדרה של max-content לרוחב האלמנט, זה מה שמונע שבירה מיותרת ושומר על תנועה מדויקת לפי התוכן.
טיפ:
אם תרצו להזיז את האלמנט לכיוונים שונים, פשוט משנים את הפונקציה בקוד:
שמאלה או ימינה נשאר על translateX
למעלה או למטה שנו ל: translateY
אפקט קטן, ביצוע פשוט, ושדרוג מיידי לתחושת הפרימיום של האתר.
תעברו עלי עם העכבר ותראו איך אני זז
selector {
transition: transform 0.2s cubic-bezier(0.42, 0, 0.58, 1.0)
}
selector:hover {
transform: translateX(-10px);
transition: transform 800ms ease-out;
}
/* Set the width to "max-content" in Advanced tab */