אנימציית תנועה תוכלי להוסיף על ידי כתיבת קוד 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%);
}
}
ויש גם התאמה רספונסיבית! הקוד מותאם לכל סוגי המסכים, ומתבסס על רוחב המסך.
תצליחי,
חגית
9 תגובות
יש לי פסקה ארוכה, רוצה שהגלילה תמשיך בלופ בלי לצאת עד הסוף, שלא יהיה מסך ריק.
יש אופציה כזאת?
אני חושבת שצריך קוד JS בשביל זה.
תודה על האתר המוצלח!
שאלה,
אני רוצה לשים באתר טקסט שיזוז מימין לשמאל ברעיון של אתר “כל רגע” (במבזקים)
ואני רוצה שהלקוח יוכל להעלות תכנים מהוורדפרס בלי לפתוח שדות וכו’
מה הדרך הכי טובה לעשות את זה?
תודה חגית, עזרת לי מאוד!
איך אני עושה שהלופ יעצר במעבר עכבר?
שלום אביגיל
תוסיפי את הקוד הבא, כדי שהלופ ייעצר במעבר עכבר
selector .elementor-heading-title:hover{ animation-play-state: paused !important; }חגית את אלופה
תודה תמנה :)
כיף גדול לקבל פידבק ממקצוענית כמוך!
תצליחי בכל,
חגית
הי חגית
למה הקוד מזיז לי בגלילה את כל האתר ימינה?
כי האנימציה חורגת מגבולות המסך.
את צריכה לבחור לקונטיינר גלישה מוסתרת.
תצליחי המון,
חגית