如何创建AnimeJS 文本动画效果 | Anime.js
2021/9/14 6:06:47
本文主要是介绍如何创建AnimeJS 文本动画效果 | Anime.js,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist