אנימציות על טקסט באמצעות 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
});
רועי יוסף
רועי יוסף

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

17תגובות...
  • אבירן 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 דבר ראשון… תודה על השיתוף!

  • מעצב אתרים 22 בספטמבר 2020, 16:28

    הסתבכתי קצת כיצד להוסיף לאתר, הוספתיאת כל האלמנטים + הספריה ושום דבר לא עולה

    • רועי יוסף 22 בספטמבר 2020, 20:35

      היי, קשה לי לענות בלי לראות את הקוד. הייתי מתחיל בלבדוק ב Developer Tools אם מופיעה לך שגיאה כלשהי…

השאירו תגובה

 

Up!
לבלוג
הפוסט עודכן לאחרונה