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

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

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

לחצי על וידג’ט כותרת > מתקדם > 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%);
    }
}

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

קבעי את מהירות האנימציה (כמה שניות תארך האנימציה) ע”י החלפת המספר 10 במספר אחר. לדוגמה:

selector .elementor-heading-title{
   animation: slide 5s linear 0s infinite !important;
}

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

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

כדי להתאים את האנימציה לכותרת באנגלית – יש לשנות את הכיוון שלה באנימציה, ככה:

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%);
    }
}

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