אנימציית סיבוב לאלמנטים באלמנטור – טיפים לאלמנטור

לאחרונה אנחנו רואים בהרבה אתרים מודרניים אנימציות סיבוב עדינות לאלמנטים ברחבי האתר שמשפרות את ההרגשה באתר.

הקוד שכתבתי עובד על כל סוגי האלמנטים באלמנטור, אך בדוגמה זו נדגים את השימוש בו על ווידג'ט נתיב טקסט.

השימוש באנימציה באלמנטור פשוט לגמרי, ומתאים גם לבוני אתרים מתחילים, פשוט הוסיפו לעמוד את הווידג'ט שבו אתם תרצו להשתמש, והכניסו את הקוד תחת CSS מותאם לווידג'ט.

/**
 * Text Rotation Animation
 * Author: Twist Digital (https://twist-digital.co.il/)
 */

/* Basic element style */
.rotating-text {
  display: inline-block;
  transform-origin: center;
}

/* Slow rotation animation */
.rotating-text.slow {
  animation: slowRotate 8s linear infinite;
}

/* Animation keyframes definition */
@keyframes slowRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

טיפים להתאמת הקוד

• לשינוי מהירות הסיבוב פשוט שנו את הערך 8s בקוד ל-4s לסיבוב מהיר יותר או ל-12s לסיבוב איטי יותר
• לסיבוב בכיוון ההפוך הוסיפו animation-direction: reverse; לאחר שורת האנימציה

סיכום

אנימציית סיבוב לווידג'טים מוסיפה לנו מימד עמוק יותר. בחרו את האלמנטים שאותם תרצו להנפיש כדי למקסם את האפקט מבלי להעמיס את האתר.

טוויסט בניית אתרים – פתרונות מתקדמים בוורדפרס ואלמנטור.