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

במדריך זה נלמד כיצד להוסיף אפקט תנועה לכותרות באתרים, כפי שניתן לראות באתרי חדשות רבים.
האפקט יוצר תחושה של עניין ותנועה, ומסייע למשוך את תשומת הלב של הצופים.

כדי להוסיף את האפקט, נבצע את הצעדים הבאים:

  1. נוסיף ווידג'ט כותרת לאתר שלנו.
  2. נעצב את הכותרת כפי שאנו רוצים.
  3. נוסיף את הקוד הבא ל-CSS במתקדם:

קוד לתזוזה מימין לשמאל:

CSS
selector .elementor-heading-title{
    width: 100%;
   white-space: nowrap;
   animation: slideRightToLeft 40s linear infinite;
   
}


@keyframes slideRightToLeft {
   0% {
      transform: translateX(106%);
   }
   100% {
      transform: translateX(-106%);
   }
}

קוד לתזוזה משמאל לימין:

CSS
selector .elementor-heading-title{
    width: 100%;
   white-space: nowrap;
   animation: slideRightToLeft 40s linear infinite;
   
}


@keyframes slideRightToLeft {
   0% {
      transform: translateX(-106%);
   }
   100% {
      transform: translateX(106%);
   }
}

כדי שהטקסט ישאר בתוך המסך ולא ישאר מסך ריק עד הסיבוב הבא של הטקסט, פשוט נשכפל את הטקסט כמה פעמים,
לדוגמא: אני רציתי לשים את הטקסט – "WEB DEVELOPER • WEB DESIGN • BRANDING • UX/UI" אז פשוט שכפלתי את הטקסט כמה פעמים בתוך ווידג'ט הכותרת.

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

11 תגובות

  1. היי , תודה על המדריך! ניסיתי לשנות את הכיוון שיהיה משמאל לימין, לא הצלחתי. אשמח להכוונה:)

    1. זה חלק הקוד שתשני בקוד המקור כדי להכיוון יהיה משמאל לימין

      @keyframes slideRightToLeft {
      0% {
      transform: translateX(-106%);
      }
      100% {
      transform: translateX(106%);
      }
      }

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

  2. תודה רבה, ממש יפה ושימושי, תודה על הפרגון של הדרכה מסודרת ומדהימה!!!!

  3. מה אני עושה אחרי ששיכפלתי את הכותרת זה עומד לי כל משפט צמוד לשני ואני לא מצליחה לעשות רווח בין המשפטים?….

כתיבת תגובה

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

ישראל פאר בניית אתרים
ישראל פאר
הבעלים של סטודיו פאר והמייסד של האתר דיגיטול – הבית לבוני אתרים בישראל, מתמחה בבניית אתרי חנות או קטלוג בדגש על חווית משתמש גבוהה, עובד בעיקר במשרד אבל לפחות פעם בשבוע יוצא לעבוד מבית קפה מעניין, נסו גם זה עובד.
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
ווקומרס
הגדלת מכירות באמצעות יצירת מוצרים קשורים עם ג'ט
במדריך זה נלמד איך להגדיל את המכירות באמצעות יצירת מוצרים קשורים עם ג'ט.
אלמנטור
יצירת אפקט מעבר צבע בכפתור אלמנטור
שדרגו את הנראות של הכפתורים באתרים שלכם.
אלמנטור
כפתורי יצירת קשר מתרחבים במעבר עכבר
רוצים להגדיל את ההמרות באתר? הוסיפו כפתורי יצירת קשר שנגללים עם העמוד!
אלמנטור
יצירת אפקט הופעה לאלמנטים במעבר עכבר עם אלמנטור
נמאס לכם להשתמש באותם עיצובים משעממים? המדריך הזה הוא בשבילכם.
ווקומרס
איך ליצור תוויות למוצרים בווקומרס עם ג'ט
הוספת תוויות חיווי למוצרים באתרי מכירות – משפר את חווית המשתמש ומגדיל את המכירות.
חיפוש חופשי
חיפוש חכם ע"י AI (בהרצה)
העדכונים שלא תרצו לפספס
הירשמו ותהיו הראשונים לקבל את המדריכים הכי חמים למייל.
הרשימה מתעדכנת כל הזמן - מומלץ לשמור את הדף במועדפים!
כדי לשמור את האתר לחצו על Ctrl+D במקלדת (במק D+⌘).