אם אתם עוקבים אחר הבלוג, לבטח אתם יודעים כי כבר נכתבו לא מעט פוסטים ברשת (זה למשל) על השימוש ב 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">&</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
});