במדריך זה נלמד כיצד להוסיף אפקט תנועה לכותרות באתרים, כפי שניתן לראות באתרי חדשות רבים.
האפקט יוצר תחושה של עניין ותנועה, ומסייע למשוך את תשומת הלב של הצופים.
כדי להוסיף את האפקט, נבצע את הצעדים הבאים:
- נוסיף ווידג'ט כותרת לאתר שלנו.
- נעצב את הכותרת כפי שאנו רוצים.
- נוסיף את הקוד הבא ל-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" אז פשוט שכפלתי את הטקסט כמה פעמים בתוך ווידג'ט הכותרת.
נתקלתם בבעיה? תכתבו לי בתגובות ואשמח לעזור, אהבתם את המדריך? תפרגנו בתגובות. בהצלחה!
15 תגובות
היי , תודה על המדריך! ניסיתי לשנות את הכיוון שיהיה משמאל לימין, לא הצלחתי. אשמח להכוונה:)
זה חלק הקוד שתשני בקוד המקור כדי להכיוון יהיה משמאל לימין
@keyframes slideRightToLeft {
0% {
transform: translateX(-106%);
}
100% {
transform: translateX(106%);
}
}
מדהים! תודה!
כמו תמיד מדריך מעולה, תודה רבה!
מגניב ביותר
טובבבבבב
אפשרי שזה יהיה בלופ?
האנימציה היא כרגע בלופ, פשוט יש זמן ריק עד שהטקסט חוזר על עצמו,
יש עוד דרך אבל היא לא תומכת בכל הדפדפנים,
מה שהייתי עושה זה פשוט משכפל את הטקסט כמה פעמים.
תודה רבה, ממש יפה ושימושי, תודה על הפרגון של הדרכה מסודרת ומדהימה!!!!
מה אני עושה אחרי ששיכפלתי את הכותרת זה עומד לי כל משפט צמוד לשני ואני לא מצליחה לעשות רווח בין המשפטים?….
תוסיפי את זה  
כשאני מעתיקה את הקוד לאלמנטור נכתב לי הקוד אסור להעתקה….
יש עם זה בעיה?
כשמנסים להעתיק תוכן זה לא נותן,
אבל יש לך שם כפתור להעתקה בלחיצה, זה עובד מצוין
מעולה תודה, אבל כדי לא לראות מסך ריק שכפלתי כמה פע' את הכותרת זה לא עוזר בסוף מגיע החלק הריק… יש פתרון ייותר טוב?
This was very enlightening.