אנימציית תזוזה עדינה במעבר עכבר

אפקטים קטנים עושים הבדל גדול בחוויית משתמש – במיוחד כשמדובר באינטראקציות בסיסיות כמו מעבר עכבר. הקוד הזה יוצר תנועה עדינה שמזיזה אלמנט מעט שמאלה בעת hover, וגורמת לו להרגיש חי, אינטראקטיבי ונעים יותר לעין. הרעיון פשוט, במצב רגיל מוגדר transition קצר עם פונקציית easing מדויקת, ובמעבר עכבר האלמנט זז ב־translateX ועם אנימציה מעט איטית יותר, […]

אנימצייה מהמרכז לצדדים בהובר על תפריט

בתפריט של אלמנטור יש לנו מספר פריסטים לאנימציות של הקו התחתון ולפעמים אנחנו נרצה אנימציות קצת שונות או שנראות אחרת בתנועה והאנימציה שלהם. הקוד הבא מייצר אנימציה של קו תחתון מהמרכז לצדדים במעבר מעל פריט בתפריט. כך יראה התפריט עם הקוד: selector nav li{ text-align: center; text-transform: uppercase; } selector li > a:after{ content: "; […]