ימים
שעות
דקות
שניות
הנחות בלאק פריידי על כל הקורסים באתר!

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

אנימציית תנועה תוכלי להוסיף על ידי כתיבת קוד CSS מותאם אישית.

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

  1. לחצי על וידג’ט כותרת > מתקדם > CSS מותאם אישית > הדביקי את הקוד הבא:
selector .elementor-heading-title{
   animation: slide 10s linear 0s infinite !important;
}

@keyframes slide{
    0%{
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100%{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

ומיד האנימציה תתחיל לעבוד!

אנימציית תנועה לכותרת
  1. קבעי את מהירות האנימציה (כמה שניות תארך האנימציה) ע”י החלפת המספר 10 במספר אחר. לדוגמה:
selector .elementor-heading-title{
   animation: slide 5s linear 0s infinite !important;
}

כעת המהירות עומדת על 5 שניות לכל אורך האנימציה, והיא פועלת מהר יותר.

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

  1. כדי להתאים את האנימציה לכותרת באנגלית – יש לשנות את הכיוון שלה באנימציה, ככה:
selector .elementor-heading-title{
   animation: slide 10s linear 0s infinite !important;
}

@keyframes slide{
    0%{
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100%{
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

ויש גם התאמה רספונסיבית! הקוד מותאם לכל סוגי המסכים, ומתבסס על רוחב המסך.

תצליחי,
חגית

9 תגובות

  1. תודה על האתר המוצלח!
    שאלה,
    אני רוצה לשים באתר טקסט שיזוז מימין לשמאל ברעיון של אתר “כל רגע” (במבזקים)
    ואני רוצה שהלקוח יוכל להעלות תכנים מהוורדפרס בלי לפתוח שדות וכו’
    מה הדרך הכי טובה לעשות את זה?

כתיבת תגובה

עוד הדרכות על CSS

דילוג לתוכן