איך ליצור אנימציית אותיות מתהפכות באלמנטור

דף הבית » הבלוג שלי » איך ליצור אנימציית אותיות מתהפכות באלמנטור

איך ליצור אנימציית אותיות מתהפכות באלמנטור

אפקט Flip Text מוסיף חיים לטקסט! כל אות מתהפכת באנימציה תלת-ממדית, שמדגישה את המסרים החשובים ביותר.

מהו אפקט Flip Text ואיך הוא משפר חווית משתמש?

אפקט ה-"Flip Text" הוא דרך פשוטה וחדשנית להוסיף חיים ועומק לעיצוב אתרים. בכל שלב של בניית אתרים, תוכלו להשתמש בו כדי להדגיש כותרות ומסרים חשובים בצורה שמושכת את העין ומשדרגת את חוויית המשתמש.
הקוד משלב CSS3 ו‑JavaScript נקי וקל, כך שההטמעה מהירה ולא מכבידה על האתר. בנוסף, האפקט מסתדר מצוין גם עם טקסטים בעברית וגם באנגלית, הקוד מזהה אוטומטית את כיוון הכתיבה.
מחפשים דרך למשוך את העין של המשתמש? להדגיש מסר חשוב? Flip Text עושה את העבודה.

איך לעבוד עם הקוד באלמנטור

הטמעת אפקט Flip Text באלמנטור ממש פשוטה ודורשת שימוש בווידג'ט HTML. הנה מדריך שלב אחר שלב:

שלב 1 – הוספת ווידג'ט HTML

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

<style>
       .flip-text {
            -webkit-perspective: 700px;
            perspective: 700px;
            font-family: gloria, Sans-Serif;
        }
        
        .flip-text span {
            font-size: 130px;
            display: inline-block;
            animation: flip 3s infinite linear;
            transform-origin: 0 70%;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            color: #0D4EF2;
            font-weight: 900;
        }
        
        @keyframes flip {
            35% { transform: rotateX(360deg); }
            100% { transform: rotateX(360deg); }
        }
        
        .flip-text span:nth-child(even) {
            color: white;
        }
        
    
        .flip-text.rtl {
            direction: rtl;
        }
        
        .flip-text.ltr {
            direction: ltr;
        }
    </style>
    
    <script>
        function isHebrewText(text) {
   
            const hebrewRegex = /[\u0590-\u05FF]/;
            return hebrewRegex.test(text);
        }
        
        function splitTextToSpans() {
            const elements = document.querySelectorAll('.flip-text');
            
            elements.forEach(element => {
                const originalText = element.textContent.trim();
                
               
                if (isHebrewText(originalText)) {
                    element.classList.add('rtl');
                    element.classList.remove('ltr');
                } else {
                    element.classList.add('ltr');
                    element.classList.remove('rtl');
                }
                
              
                element.innerHTML = '';
              
              
                for (let i = 0; i < originalText.length; i++) {
                    const span = document.createElement('span');
                    const char = originalText[i];
                    
                    
                    span.style.animationDelay = (i * 0.3) + 's';
                    
                   
                    if (char === ' ') {
                        span.innerHTML = ' ';
                    } else {
                        span.textContent = char;
                    }
                    
                    element.appendChild(span);
                }
            });
        }
        
     
        document.addEventListener('DOMContentLoaded', splitTextToSpans);
        
        
        window.splitFlipText = splitTextToSpans;
    </script>

<style>
       .flip-text {
            -webkit-perspective: 700px;
            perspective: 700px;
            font-family: gloria, Sans-Serif;
        }
        
        .flip-text span {
            font-size: 130px;
            display: inline-block;
            animation: flip 3s infinite linear;
            transform-origin: 0 70%;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            color: #0D4EF2;
            font-weight: 900;
        }
        
        @keyframes flip {
            35% { transform: rotateX(360deg); }
            100% { transform: rotateX(360deg); }
        }
        
        .flip-text span:nth-child(even) {
            color: white;
        }
        
    
        .flip-text.rtl {
            direction: rtl;
        }
        
        .flip-text.ltr {
            direction: ltr;
        }
    </style>
    
    <script>
        function isHebrewText(text) {
   
            const hebrewRegex = /[\u0590-\u05FF]/;
            return hebrewRegex.test(text);
        }
        
        function splitTextToSpans() {
            const elements = document.querySelectorAll('.flip-text');
            
            elements.forEach(element => {
                const originalText = element.textContent.trim();
                
               
                if (isHebrewText(originalText)) {
                    element.classList.add('rtl');
                    element.classList.remove('ltr');
                } else {
                    element.classList.add('ltr');
                    element.classList.remove('rtl');
                }
                
              
                element.innerHTML = '';
              
              
                for (let i = 0; i < originalText.length; i++) {
                    const span = document.createElement('span');
                    const char = originalText[i];
                    
                    
                    span.style.animationDelay = (i * 0.3) + 's';
                    
                   
                    if (char === ' ') {
                        span.innerHTML = ' ';
                    } else {
                        span.textContent = char;
                    }
                    
                    element.appendChild(span);
                }
            });
        }
        
     
        document.addEventListener('DOMContentLoaded', splitTextToSpans);
        
        
        window.splitFlipText = splitTextToSpans;
    </script>

Expand

שלב 2 – הגדרת הקלאס לטקסט

בכותרת שהוספנו לעמוד נעבור ללשונית מתקדם → קלאס CSS ונוסיף את הקלאס:

flip-text

flip-text

שלב 3 – התאמת הקוד לעיצוב שלכם

ניתן לשלוט בכמה פרמטרים עיצוביים ישירות מתוך ה-CSS:

1. סוג הפונט

בקוד ה-CSS יש את ההגדרה:

font-family: gloria, Sans-Serif;

font-family: gloria, Sans-Serif;

אפשר להחליף לכל פונט אחר שמותקן באתר או באמצעות Google Fonts.

2. גודל הפונט

הגדרת גודל הפונט נמצאת כאן:

font-size: 130px;

font-size: 130px;

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

3. צבעים

הצבע הראשי מוגדר כאן:

color: #0D4EF2;

color: #0D4EF2;

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

.flip-text span:nth-child(even) {
    color: white;
}

.flip-text span:nth-child(even) {
    color: white;
}

ניתן לשנות גם את זה, למשל לשני צבעים מותאמים למיתוג שלך.

לסיכום

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