טקסט מסתובב באנימציה קבועה

טקסט שמסתובב במעגל סביב לוגו, תמונה או כפתור הוא אחד הטרנדים העיצוביים הבולטים באתרים מודרניים. רואים אותו בדפי נחיתה, באתרי סטודיו ובחנויות, בדרך כלל כתגית עגולה עם משפט כמו "גללו למטה" או "מבצע מיוחד". באלמנטור בונים אותו בשני שלבים: ווידג'ט "נתיב טקסט" שמסדר את האותיות במעגל, וכמה שורות CSS שגורמות לו להסתובב בלי הפסקה.

במדריך הזה אנחנו ב-YMDigital עוברים על כל התהליך: ההגדרות המומלצות לווידג'ט, הקוד, שינוי מהירות וכיוון, מיקום אייקון במרכז העיגול, עצירה במעבר עכבר ונגישות. האפקט הזה הוא חלק ממשפחה רחבה יותר של עיצובים שריכזנו במדריך אפקטי CSS לאלמנטור.

איך עושים טקסט מסתובב באלמנטור?

גוררים ווידג'ט "נתיב טקסט", בוחרים סוג נתיב מעגלי, ומוסיפים לווידג'ט CSS עם אנימציית סיבוב אינסופית על רכיב ה-SVG שבתוכו. הווידג'ט עצמו קיים גם באלמנטור החינמי. שדה ה-CSS המותאם דורש אלמנטור פרו, ובגרסה החינמית מוסיפים את הקוד דרך מחלקה.

• הגדרות הווידג'ט שגורמות לטקסט לסגור מעגל מושלם
• קוד האנימציה והסבר עליו
• שינוי מהירות וכיוון
• אייקון או לוגו במרכז העיגול
• עצירה במעבר עכבר ונגישות
• תקלות נפוצות ופתרונות

1. הכנת ווידג'ט נתיב טקסט

1.1 הוספת הווידג'ט

בחלונית הווידג'טים מחפשים "נתיב טקסט" וגוררים אותו לעמוד. בשדה "סוג נתיב" בוחרים מעגלי. יש גם אפשרויות של גל, קשת, אליפסה, ואפילו SVG מותאם אם רוצים צורה משלכם.

1.2 ההגדרות שאנחנו ממליצים עליהן

• טקסט: משפט קצר שחוזר פעמיים או שלוש, עם מפריד ביניהם, למשל "בניית אתרים • קידום אורגני •". המפריד יוצר מקצב נעים לעין.
• גודל: בלשונית "סגנון" מגדירים גודל של כ-150px. זה הגודל שבו התגית העגולה נראית טוב ליד כותרת או כפתור.
• ריווח מילים: כ-10px. משחקים עם הערך עד שהטקסט מתפרס על כל ההיקף.
• כיוון טקסט: באתר בעברית בוחרים RTL, אחרת האותיות יופיעו הפוכות.
• נקודת התחלה: קובעת איפה על העיגול הטקסט מתחיל. שימושי כשרוצים שהמשפט ייקרא נכון בתחילת הסיבוב.
• הצג נתיב: משאירים כבוי, אלא אם רוצים שהעיגול עצמו ייראה כקו.

1.3 סגירת המעגל

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

1.4 מה לכתוב בתגית

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

2. קוד האנימציה

2.1 הקוד

בלשונית "מתקדם" של הווידג'ט פותחים את "CSS מותאם" ומדביקים:

selector svg {
  animation: spinText 20s linear infinite;
}

@keyframes spinText {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

2.2 מה הקוד עושה

• selector svg: פונה לרכיב ה-SVG שבתוך הווידג'ט, כלומר לעיגול עם הטקסט. מסובבים רק אותו ולא את כל הווידג'ט, כדי לא להזיז שוליים ורקעים.
• 20s: משך סיבוב אחד מלא. 20 שניות נותנות תנועה רגועה שלא מסיחה את הדעת.
• linear: מהירות קבועה לאורך כל הסיבוב, בלי האטה והאצה.
• infinite: הסיבוב חוזר על עצמו בלי סוף.

2.3 שינוי מהירות וכיוון

כדי להאט או להאיץ, משנים את מספר השניות. 10s נותן תחושה דינמית, ו-30s עדין מאוד. כדי שהטקסט יסתובב נגד כיוון השעון, מוסיפים לשורת האנימציה את המילה reverse:

selector svg {
  animation: spinText 20s linear infinite reverse;
}

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

2.4 סיבוב שמגיב לגלילה

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

3. אייקון או לוגו במרכז העיגול

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

• יוצרים קונטיינר, ומכניסים לתוכו את ווידג'ט נתיב הטקסט ומתחתיו ווידג'ט אייקון או תמונה.
• בווידג'ט האייקון, בלשונית "מתקדם", תחת "מיקום", בוחרים אבסולוטי.
• מגדירים דילוג אופקי ואנכי של 50%, ומוסיפים את הקוד הבא לאייקון כדי למרכז אותו בדיוק.

selector {
  transform: translate(-50%, -50%);
}

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

4. עצירה במעבר עכבר ונגישות

4.1 עצירה כשהעכבר מעל

אם התגית היא גם קישור, נוח לגולש שהיא תעצור כשהוא מצביע עליה:

selector:hover svg {
  animation-play-state: paused;
}

לווידג'ט נתיב טקסט יש שדה "קישור" מובנה, כך שאפשר להפוך את התגית כולה לכפתור שמוביל לעמוד השירות או לטופס.

4.2 גולשים שביקשו פחות תנועה

יש גולשים שתנועה מתמדת מפריעה להם, והם מגדירים זאת במערכת ההפעלה. מכבדים את ההגדרה הזו בשלוש שורות:

@media (prefers-reduced-motion: reduce) {
  selector svg { animation: none; }
}

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

4.3 כמה אנימציות בעמוד

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

5. טקסט מסתובב בלי אלמנטור פרו

ווידג'ט נתיב הטקסט זמין גם בגרסה החינמית, אבל שדה ה-CSS המותאם לא. הפתרון הוא מחלקה:

• בווידג'ט, בלשונית "מתקדם", כותבים בשדה "מחלקות CSS" את השם spin-text, בלי נקודה.
• בלוח הבקרה נכנסים ל"עיצוב", ל"התאמה אישית" ואז ל"CSS נוסף", ומדביקים:

.spin-text svg {
  animation: spinText 20s linear infinite;
}

@keyframes spinText {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spin-text svg { animation: none; }
}

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

6. תקלות נפוצות ואיך פותרים אותן

6.1 הטקסט מסתובב סביב נקודה לא נכונה

אם העיגול "מתנדנד" במקום להסתובב במקום, בדרך כלל הקוד הופעל על הווידג'ט כולו ולא על ה-SVG. ודאו שכתוב selector svg ולא רק selector. אם הבעיה נמשכת, הוסיפו transform-origin: center; לאותו כלל.

6.2 האותיות הפוכות או בסדר שגוי

זה קורה כשכיוון הטקסט בווידג'ט מוגדר LTR. משנים ל-RTL בשדה "כיוון טקסט", והעברית תוצג כמו שצריך.

6.3 רווח גדול או חפיפה בסוף הטקסט

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

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

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

סיכום

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

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

שאלות נפוצות על טקסט מסתובב באלמנטור

האם ווידג'ט נתיב טקסט קיים באלמנטור החינמי?

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

האם טקסט מסתובב מאט את האתר?

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

איך משנים את מהירות הסיבוב?

משנים את מספר השניות בשורת האנימציה. הערך 20s אומר שסיבוב מלא נמשך 20 שניות. מספר קטן יותר, כמו 10s, יסובב מהר יותר, ומספר גדול יותר, כמו 30s, יאט את התנועה. כדאי לבדוק את התוצאה גם במובייל, כי במסך קטן תנועה מהירה בולטת יותר.

איך גורמים לטקסט להסתובב לכיוון השני?

מוסיפים את המילה reverse בסוף שורת האנימציה, כך שהטקסט יסתובב נגד כיוון השעון. אפשר גם להחליף את הערך 360deg ב-‎-360deg בתוך ה-keyframes. שתי הדרכים נותנות אותה תוצאה, והבחירה ביניהן היא עניין של נוחות. באתרים בעברית סיבוב נגד כיוון השעון מתאים לכיוון הקריאה.

למה הטקסט בעברית מופיע הפוך?

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