Search

אנימציות על טקסט באמצעות 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!
לבלוג