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>

この記事が気に入ったらサポートをしてみませんか？