如何创建AnimeJS 文本动画效果 | Anime.js

无卤 • • web开发技术 • 354 阅读 

<!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>

如何创建AnimeJS 文本动画效果 | Anime.js

原文：https://www.cnblogs.com/hechunfeng/p/15265720.html

以上是如何创建AnimeJS 文本动画效果 | Anime.js的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>