• 如何创建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>
  • 相关阅读:
    [moblie]safari 关闭上下文菜单和选区菜单
    [javascript] <完全开源,开心分享> HTML5 Canvas 在线图片处理《imageMagic》(single page app)开发详解[1]
    [nodejs]q&a
    [tool]webstorm 用firewatcher编译less
    前端截长屏功能
    切换路由默认回到顶部功能
    echarts 词云图和Map图兼容
    针对笔记本电脑系统默认缩放为150%导致页面放大解决方案
    关于专利的写作注意的要点(待续)
    Quartus中引脚的添加
  • 原文地址:https://www.cnblogs.com/hechunfeng/p/15265720.html
Copyright © 2020-2023  润新知