<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to Create AnimeJS Text Animation Effects | Anime.js</title>
<style type="text/css">
@import url("https://fonts.goog;eapis.com/css?family=Roboto:300,400,500,700,900&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto',sans-serif;
}
section{
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #0e1623;
overflow: hidden;
}
section .text{
position: relative;
font-size: 5em;
text-align: center;
color: #00fe77;
-webkit-box-reflect: below -0.45em linear-gradient(transparent,#0004);
}
section .text span{
position: relative;
display: inline-block;
}
</style>
</head>
<body>
<section>
<h2 class="text">AnimeJS Text Animation Effects</h2>
</section>
<script src="./js/anime.min.js" type="text/javascript" charset="utf-8"></script>
<!-- js文件下载地址https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.min.js
https://github.com/juliangarnier/anime/tree/master/lib
官网：https://animejs.com/ -->
<script type="text/javascript">
//now,split text into words
const text=document.querySelector('.text');
text.innerHTML=text.textContent.replace(/\S/g,"<span>$&</span>");//这里可以去F12看看h2标签的效果，每一个字都分成了span里面
anime.timeline({
loop:false
})
//动作是中间一个一个来
.add({
targets:'.text span',
// translateY:[start value,end Value] 参考
translateY:[-600 ,0], //[start value,end Value]
scale:[10,1], //[start value,end Value]
opacity:[0,1], //[start value,end Value]
easing:"easeOutExpo",
duration:1500 ,//1.5seconds
delay: anime.stagger(100),
})
//加多一条，就有有另外的动作,从左边离开
.add({
targets:'.text span',
// translateY:[start value,end Value] 参考
translateX:[0 ,-1000], //[start value,end Value]
scale:[1,1], //[start value,end Value]
opacity:[1,0], //[start value,end Value]
easing:"easeOutExpo",
duration:2000 ,//1.5seconds
delay: anime.stagger(100),
})
//加多一条，就有有另外的动作,从右边回来
.add({
targets:'.text span',
// translateY:[start value,end Value] 参考
translateX:[-1000 ,0], //[start value,end Value]
scale:[1,1], //[start value,end Value]
opacity:[0,1], //[start value,end Value]
easing:"easeOutExpo",
duration:2000 ,//1.5seconds
delay: anime.stagger(100),
})
//加多一条，就有有另外的动作,一个个弹向屏幕
.add({
targets:'.text span',
// translateY:[start value,end Value] 参考
translateX:[0,0], //[start value,end Value]
scale:[1,50], //[start value,end Value]
opacity:[1,0], //[start value,end Value]
easing:"easeOutExpo",
duration:2000 ,//1.5seconds
delay: anime.stagger(100),
})
</script>
</body>
</html>