אנימציות על טקסט באמצעות Anime.js

כיצד להוסיף אנימציה לטקסט באמצעות Javascript ו Anime.js?

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

אין יותר מה להרחיב מעבר לכך – תנו מבט באנימציות אלו שמצאתי ברשת. אם ברצונכם לראות את הקוד לחצו על האנימציה…. מקווה שתמצאו שימושי מתישהו 🙂

אנימציות טקסט – דוגמאות עם קוד

ידיעות אחרונות
<div class="text-box">
    <div class="ml1">
          <span class="text-wrapper">
              <span class="line line1"></span>
              <span class="letters">ידיעות אחרונות</span>
              <span class="line line2"></span>
          </span>
    </div>
</div>
.ml1 {
    font-weight: 800;
    font-family: 'Heebo';
    color: azure;
}

.ml1 .letter {
    display: inline-block;
    line-height: 1em;
}

.ml1 .text-wrapper {
    position: relative;
    display: inline-block;
}

.ml1 .line {
    opacity: 0;
    position: absolute;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: #fefefe;
    transform-origin: 0 0;
}

.ml1 .line1 {
    top: -5px;
}

.ml1 .line2 {
    bottom: 0;
}
$('.ml1 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml1 .letter',
        scale: [0.3, 1],
        opacity: [0, 1],
        translateZ: 0,
        easing: "easeOutExpo",
        duration: 600,
        delay: function (el, i) {
            return 70 * (i + 1)
        }
    }).add({
    targets: '.ml1 .line',
    scaleX: [0, 1],
    opacity: [0.5, 1],
    easing: "easeOutExpo",
    duration: 700,
    offset: '-=875',
    delay: function (el, i, l) {
        return 80 * (l - i);
    }
}).add({
    targets: '.ml1',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
אהבה ממבט ראשון
<div class="text-box two">
    <div class="ml2">
        <span class="text-wrapper">
          <span class="letters">אהבה ממבט ראשון</span>
        </span>
    </div>
</div>
.ml2 .letter {
    display: inline-block;
}
$('.ml2').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml2 .letter',
        scale: [4, 1],
        opacity: [0, 1],
        translateZ: 0,
        easing: "easeOutExpo",
        duration: 950,
        delay: function (el, i) {
            return 70 * i;
        }
    }).add({
    targets: '.ml2',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
האוקיינוס השקט
<div class="text-box three">
    <div class="ml3">
        <span class="text-wrapper">
          <span class="letters">האוקיינוס השקט</span>
        </span>
    </div>
</div>
$('.ml3').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml3 .letter',
        opacity: [0, 1],
        easing: "easeInOutQuad",
        duration: 2250,
        delay: function (el, i) {
            return 150 * (i + 1)
        }
    }).add({
    targets: '.ml3',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
אודיו & וידאו
<div class="text-box five">
    <div class="ml5">
          <span class="text-wrapper">
                <span class="line line1"></span>
                <span class="letters letters-left">אודיו</span>
                <span class="letters ampersand">&amp;</span>
                <span class="letters letters-right">וידאו</span>
                <span class="line line2"></span>
          </span>
    </div>
</div>
.ml5 {
    position: relative;
    font-weight: 300;
    color: #402d2d;
    font-family: 'Frank Ruhl Libre';
}

.ml5 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.1em;
    padding-right: 0.05em;
    padding-bottom: 0.15em;
    line-height: 1em;
}

.ml5 .line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 3px;
    width: 100%;
    background-color: #402d2d;
    transform-origin: 0.5 0;
}


.ml5 .ampersand {
    font-family: Baskerville, "EB Garamond", serif;
    font-style: italic;
    font-weight: 400;
    width: 0.9em;
    margin-right: 0.1em;
}

.ml5 .letters {
    display: inline-block;
    opacity: 0;
}
anime.timeline({loop: true})
    .add({
        targets: '.ml5 .line',
        opacity: [0.5, 1],
        scaleX: [0, 1],
        easing: "easeInOutExpo",
        duration: 700
    }).add({
    targets: '.ml5 .line',
    duration: 600,
    easing: "easeOutExpo",
    translateY: function (e, i, l) {
        var offset = -0.625 + 0.625 * 2 * i;
        return offset + "em";
    }
}).add({
    targets: '.ml5 .ampersand',
    opacity: [0, 1],
    scaleY: [0.5, 1],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=600'
}).add({
    targets: '.ml5 .letters-left',
    opacity: [0, 1],
    translateX: ["0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=300'
}).add({
    targets: '.ml5 .letters-right',
    opacity: [0, 1],
    translateX: ["-0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=600'
}).add({
    targets: '.ml5',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
החלונות הגבוהים
<div class="text-box six">
    <div class="ml6">
          <span class="text-wrapper">
            <span class="letters">החלונות הגבוהים</span>
          </span>
    </div>
</div>
.ml6 {
    position: relative;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.6);
    font-family: 'Heebo';
}

.ml6 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.3em;
    overflow: hidden;
}

.ml6 .letter {
    display: inline-block;
    line-height: 1em;
}
$('.ml6 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml6 .letter',
        translateY: ["1.1em", 0],
        translateZ: 0,
        duration: 750,
        delay: function (el, i) {
            return 50 * i;
        }
    }).add({
    targets: '.ml6',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
המציאות נושכת
<div class="text-box seven">
    <div class="ml7">
          <span class="text-wrapper">
            <span class="letters">מציאות נושכת</span>
          </span>
    </div>
</div>
.ml7 {
    position: relative;
    font-weight: 900;
    font-family: 'Heebo';
    font-size: 26px;
}

.ml7 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.2em;
    padding-right: 0.05em;
    padding-bottom: 0.1em;
    overflow: hidden;
}

.ml7 .letter {
    transform-origin: 0 100%;
    display: inline-block;
    line-height: 1em;
}
$('.ml7 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml7 .letter',
        translateY: ["1.1em", 0],
        translateX: ["0.55em", 0],
        translateZ: 0,
        rotateZ: [180, 0],
        duration: 750,
        easing: "easeOutExpo",
        delay: function (el, i) {
            return 50 * i;
        }
    }).add({
    targets: '.ml7',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
היי !
<div class="text-box eight">
    <div class="ml8">
          <span class="letters-container">
            <span class="letters letters-left">היי</span>
            <span class="letters bang">!</span>
          </span>
          <span class="circle circle-white"></span>
          <span class="circle circle-dark"></span>
          <span class="circle circle-container"><span class="circle circle-dark-dashed"></span></span>
    </div>
</div>
.ml8 {
    font-weight: 900;
    color: #fefefe;
    height: 5em;
    position: relative;
    text-align: center;
}

.ml8 .letters-container {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    height: 1em;
}

.ml8 .letters {
    position: relative;
    z-index: 2;
    display: inline-block;
    line-height: 0.7em;
    left: -0.12em;
    top: -0.2em;
}

.ml8 .bang {
    font-size: 1.4em;
    top: auto;
    right: -0.06em;
}

.ml8 .circle {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
}

.ml8 .circle-#fefefe {
    width: 3em;
    height: 3em;
    border: 2px dashed #fefefe;
    border-radius: 2em;
}

.ml8 .circle-dark {
    width: 2.2em;
    height: 2.2em;
    background-color: #4f7b86;
    border-radius: 3em;
    z-index: 1;
}

.ml8 .circle-dark-dashed {
    border-radius: 2.4em;
    background-color: transparent;
    border: 2px dashed #4f7b86;
    width: 2.3em;
    height: 2.3em;
}
anime.timeline({loop: true})
    .add({
        targets: '.ml8 .circle-white',
        scale: [0, 3],
        opacity: [1, 0],
        easing: "easeInOutExpo",
        rotateZ: 360,
        duration: 1100
    }).add({
    targets: '.ml8 .circle-container',
    scale: [0, 1],
    duration: 1100,
    easing: "easeInOutExpo",
    offset: '-=1000'
}).add({
    targets: '.ml8 .circle-dark',
    scale: [0, 1],
    duration: 1100,
    easing: "easeOutExpo",
    offset: '-=600'
}).add({
    targets: '.ml8 .letters-left',
    scale: [0, 1],
    duration: 1200,
    offset: '-=550'
}).add({
    targets: '.ml8 .bang',
    scale: [0, 1],
    rotateZ: [45, -10],
    duration: 1200,
    offset: '-=1000'
}).add({
    targets: '.ml8',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1400
});

anime({
    targets: '.ml8 .circle-dark-dashed',
    rotateZ: 360,
    duration: 8000,
    easing: "linear",
    loop: true
});
קפה של בוקר
<div class="text-box nine">
    <div class="ml9">
    <span class="text-wrapper">
        <span class="letters">קפה של בוקר</span>
    </span>
    </div>
</div>
.ml9 {
    position: relative;
    font-weight: 200;
    font-family: 'Tinos';
    color: #cfc2c6;
    font-size: 48px;
}

.ml9 .text-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.ml9 .letter {
    transform-origin: 50% 100%;
    display: inline-block;
    line-height: 1em;
}
$('.ml9 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml9 .letter',
        scale: [0, 1],
        duration: 1500,
        elasticity: 600,
        delay: function (el, i) {
            return 45 * (i + 1)
        }
    }).add({
    targets: '.ml9',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
דומינוס פיצה
<div class="text-box ten">
    <div class="ml10">
    <span class="text-wrapper">
        <span class="letters">דומינוס פיצה</span>
    </span>
    </div>
</div>
.ml10 {
    position: relative;
    font-weight: 900;
    font-family: 'Miriam Libre';
    font-size: 60px;
    line-height: 1;
}

.ml10 .text-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.ml10 .letter {
    display: inline-block;
    line-height: 1em;
    transform-origin: 0 0;
}
$('.ml10 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml10 .letter',
        rotateY: [-90, 0],
        duration: 1300,
        delay: function (el, i) {
            return 45 * i;
        }
    }).add({
    targets: '.ml10',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
שלום ולהתראות
<div class="text-box eleven">
    <div class="ml11">
     <span class="text-wrapper">
         <span class="line line1"></span>
         <span class="letters">שלום ולהתראות</span>
     </span>
    </div>
</div>
.ml11 {
    font-weight: 900;
}

.ml11 .text-wrapper {
    position: relative;
    display: inline-block;
    text-shadow: 0 3px 0 #b2a98f, 0 7px 10px rgba(0, 0, 0, 0.15), 0 6px 2px rgba(0, 0, 0, 0.1), 0 34px 30px rgba(0, 0, 0, 0.1);
}

.ml11 .line {
    opacity: 0;
    position: absolute;
    right: 0;
    height: 100%;
    width: 3px;
    background-color: #fefefe;
    transform-origin: 0 50%;
}

.ml11 .line1 {
    top: 0;
    right: 10px;
}

.ml11 .letter {
    display: inline-block;
    line-height: 1em;
}
$('.ml11 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml11 .line',
        scaleY: [0, 1],
        opacity: [0.5, 1],
        easing: "easeOutExpo",
        duration: 700
    })
    .add({
        targets: '.ml11 .line',
        translateX: [0, $(".ml11 .letters").width() * -1],
        easing: "easeOutExpo",
        duration: 700,
        delay: 100
    }).add({
    targets: '.ml11 .letter',
    opacity: [0, 1],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=775',
    delay: function (el, i) {
        return 34 * (i + 1)
    }
}).add({
    targets: '.ml11',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
סאבי הפקות בע״מ
<div class="text-box twelve">
    <div class="ml12">
        סאבי הפקות בע״מ
    </div>
</div>
.ml12 {
    font-weight: 200;
    letter-spacing: 0.4em;
    font-size: 22px;
}

.ml12 .letter {
    display: inline-block;
    line-height: 1em;
}
$('.ml12').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml12 .letter',
        translateX: [40, 0],
        translateZ: 0,
        opacity: [0, 1],
        easing: "easeOutExpo",
        duration: 1200,
        delay: function (el, i) {
            return 500 + 30 * i;
        }
    }).add({
    targets: '.ml12 .letter',
    translateX: [0, -30],
    opacity: [1, 0],
    easing: "easeInExpo",
    duration: 1100,
    delay: function (el, i) {
        return 100 + 30 * i;
    }
});
השמש העולה
<div class="text-box thirteen">
    <div class="ml13">
        השמש העולה
    </div>
</div>
.ml13 {
    letter-spacing: 0.2em;
    font-weight: 800;
    font-family: 'Heebo';
    font-size: 28px;
}

.ml13 .letter {
    display: inline-block;
    line-height: 1em;
}
$('.ml13').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml13 .letter',
        translateY: [100, 0],
        translateZ: 0,
        opacity: [0, 1],
        easing: "easeOutExpo",
        duration: 1400,
        delay: function (el, i) {
            return 300 + 30 * i;
        }
    }).add({
    targets: '.ml13 .letter',
    translateY: [0, -100],
    opacity: [1, 0],
    easing: "easeInExpo",
    duration: 1200,
    delay: function (el, i) {
        return 100 + 30 * i;
    }
});
מצאו את האלמנט
<div class="text-box fourteen">
     <div class="ml14">
         <span class="text-wrapper">
            <span class="letters">מצאו את האלמנט</span>
            <span class="line"></span>
         </span>
     </div>
</div>
.ml14 {
    font-weight: 200;
}

.ml14 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.1em;
    padding-right: 0.05em;
    padding-bottom: 0.15em;
}

.ml14 .line {
    opacity: 0;
    position: absolute;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #fefefe;
    transform-origin: 100% 100%;
    bottom: 0;
}

.ml14 .letter {
    display: inline-block;
    line-height: 1em;
}
$('.ml14 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml14 .line',
        scaleX: [0, 1],
        opacity: [0.5, 1],
        easing: "easeInOutExpo",
        duration: 900
    }).add({
    targets: '.ml14 .letter',
    opacity: [0, 1],
    translateX: [40, 0],
    translateZ: 0,
    scaleX: [0.3, 1],
    easing: "easeOutExpo",
    duration: 800,
    offset: '-=600',
    delay: function (el, i) {
        return 150 + 25 * i;
    }
}).add({
    targets: '.ml14',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
צא עכשיו
<div class="text-box fifteen">
    <div class="ml15">
        <span class="word">צא</span>
        <span class="word">עכשיו</span>
    </div>
</div>
.ml15 {
    font-weight: 700;
    letter-spacing: 0.2em;
}

.ml15 .word {
    display: inline-block;
    line-height: 1em;
}
anime.timeline({loop: true})
    .add({
        targets: '.ml15 .word',
        scale: [14, 1],
        opacity: [0, 1],
        easing: "easeOutCirc",
        duration: 800,
        delay: function (el, i) {
            return 800 * i;
        }
    }).add({
    targets: '.ml15',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
נוצר באהבה :)
<div class="text-box sixteen">
    <div class="ml16">
        נוצר באהבה :)
    </div>
</div>
.ml16 {
    color: #402d2d;
    font-weight: 800;
    letter-spacing: 0.2em;
    overflow: hidden;
    font-family: 'Heebo';
    font-size: 24px;
}

.ml16 .letter {
    display: inline-block;
    line-height: 1em;
}
$('.ml16').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml16 .letter',
        translateY: [-100, 0],
        easing: "easeOutExpo",
        duration: 1400,
        delay: function (el, i) {
            return 30 * i;
        }
    }).add({
    targets: '.ml16',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});
רועי יוסף
רועי יוסף

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

14תגובות...
  • אבירן 1 ביוני 2019, 14:40

    מלך, כרגיל
    תודה 🙂

  • רוב 2 ביוני 2019, 9:00

    יפה

  • רוב 3 ביוני 2019, 15:45
    <div class="text-box six">
        <div class="ml6">
              <span class="text-wrapper">
                <span class="letters">זה יעבוד כאן?</span>
              </span>
        </div>
    </div>
  • נחמה 10 ביוני 2019, 11:38

    תודה!

  • ישראל 16 ביוני 2019, 13:50

    מעניין לראות מתי אלמנטור ימצאו את האפקטים האלה?

  • אליהו 17 ביוני 2019, 9:55

    תודה רבה, ממש מושקע..

  • שמעון 27 ביוני 2019, 22:00

    אפשר להשתמש באנימציות אלו גם בוורדפרס?

    • רועי יוסף 27 ביוני 2019, 22:01

      היי שמעון,

      כמובן – הבלוג הזה בנוי בוורדפרס….

  • אור 30 ביוני 2019, 23:18

    מאמר נהדר.

    אני עובד עם אלמנטור וכשאני מכניס חלק מהקודים שהצגת, מופיעה לי שגיאה בתחילת הסקריפט (ללא השורה הראשונה אז הקוד כן עובד אך בלי החלק של העברית). לדוגמה: בסקריפט הראשון של "ידיעות אחרונות", זו השגיאה שמופיעה לי בקונסול: Uncaught TypeError: $ is not a function

    וזה מתייחס לשורה זו:

    $('.ml1 .letters').each(function () {
        $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
    });

    יש דרך לפתור זאת?

    נ.ב מדריך מטורף! אין עלייך רועי.

    • רועי יוסף 30 ביוני 2019, 23:29

      היי אור,

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

      שמח שאתה אוהב את הפוסט 🙂

      • אור 2 ביולי 2019, 1:15

        הבעיה הייתה בסוף בתבנית של האתר
        הקוד עובד עכשיו.

        שוב, תודה על העזרה רועי!

        • רועי יוסף 2 ביולי 2019, 1:16

          תענוג 🙂

          • אור 3 ביולי 2019, 13:34

            מצטער שוב על החפירה.

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

              <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            • רועי יוסף 3 ביולי 2019, 20:44

              כמובן שחייבים לטעון את jQuery דבר ראשון… תודה על השיתוף!

השאירו תגובה

Up!