anime.jsのテキストアニメーション
複数の時
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
</head>
<body>
<div class="composition-wrapper" data-color="9ba5b5">
<h1 class="ml1">
<span class="text-wrapper">
<span class="line line1"></span>
<span class="letters">THURSDAY</span>
<span class="line line2"></span>
</span>
</h1>
<h1 class="ml2">Sunny mornings</h1>
<h1 class="ml2_1">Sunny mornings2</h1>
<!--more-->
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml1 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/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: (el, i) => 70 * (i+1)
}).add({
targets: '.ml1 .line',
scaleX: [0,1],
opacity: [0.5,1],
easing: "easeOutExpo",
duration: 700,
offset: '-=875',
delay: (el, i, l) => 80 * (l - i)
}).add({
targets: '.ml1',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
var textWrapper2 = document.querySelector('.ml2');
textWrapper2.innerHTML = textWrapper2.textContent.replace(/\S/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: (el, i) => 70*i
}).add({
targets: '.ml2',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
var textWrapper2_1 = document.querySelector('.ml2_1');
textWrapper2_1.innerHTML = textWrapper2_1.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml2_1 .letter',
scale: [4,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 950,
delay: (el, i) => 70*i
}).add({
targets: '.ml2_1',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
<style>
.ml1 {
font-weight: 900;
font-size: 3.5em;
}
.ml1 .letter {
display: inline-block;
line-height: 1em;
}
.ml1 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.1em;
padding-right: 0.05em;
padding-bottom: 0.15em;
}
.ml1 .line {
opacity: 0;
position: absolute;
left: 0;
height: 3px;
width: 100%;
background-color: #fff;
transform-origin: 0 0;
}
.ml1 .line1 { top: 0; }
.ml1 .line2 { bottom: 0; }
.ml2 {
font-weight: 900;
font-size: 3.5em;
}
.ml2 .letter {
display: inline-block;
line-height: 1em;
}
</style>
</div><!--omposition-wrappe-->
</body>
</html>
この記事が気に入ったらサポートをしてみませんか?