当前位置： 移动技术网 > IT编程>网页制作>CSS > TweenMax—ScrambleText插件 实现类似电脑破译密码的特效

TweenMax—ScrambleText插件 实现类似电脑破译密码的特效

2019年07月13日  | 移动技术网IT编程  | 我要评论

首先贴一下tweenmax的中文网：

首先先展示一下最后的效果，需要的就继续看下去：

 

那团乱码是会一直变的

那么如何实现上图的效果呢？？？

其实就是运用了tweenmax的插件scrambletextplugin（在这个页面可以下载：）

 

 

代码如下：

js

$(document).ready(function(){
    var tl = new timelinelite();
    tl.to("#scramble1",3,{delay:2})//这边的delay就是用来做延迟显示的，也可以去掉的。用scrambletext这个插件的意义其实就是：当第一个动画结束之后，第二个动画才会开始，所以应该是去避免使用delay属性的
      .to("#scramble1",8,{scrambletext:{text:"{original}", chars:"upperandlowercase", revealdelay:0.5, tweenlength:true, newclass:"class2", oldclass:"class1",speed:10,delimiter:""}, ease:linear.easenone})
      .to("#scramble2",3,{delay:2}) 
      .to("#scramble2",8,{scrambletext:{text:"{original}", chars:"upperandlowercase", revealdelay:0.5, tweenlength:true, newclass:"class2", oldclass:"class1",speed:10,delimiter:""}, ease:linear.easenone})
      .to("#scramble3",3,{delay:2})
      .to("#scramble3",8,{scrambletext:{text:"{original}", chars:"upperandlowercase", revealdelay:0.5, tweenlength:true, newclass:"class2", oldclass:"class1",speed:10,delimiter:""}, ease:linear.easenone})
      .to("#scramble4",3,{delay:2})
      .to("#scramble4",8,{scrambletext:{text:"{original}", chars:"upperandlowercase", revealdelay:0.5, tweenlength:true, newclass:"class2", oldclass:"class1",speed:10,delimiter:""}, ease:linear.easenone});
})

相应的参数如下图所示：

 

 

html 

 

<!doctype html>
<html lang="zh-cn">
    <head>  
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> 
        <meta name="keywords" content="twelve">
        <title>chat</title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="js/chatting_room.js"></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/tweenmax.min.js'></script>
        <script src="js/scrambletextplugin.min.js"></script>


        <link rel="stylesheet" href="css/chatting_room.css" type="text/css">
    </head>
    <body onselectstart="return false" oncontextmenu=self.event.returnvalue=false><!---->
        
        <div id="scramble1">
            hel..hello... can u see me?? okk, listen ...press f11, better to look...
        </div>
        <div id="scramble2">
            well.. i'm twelve, glad tooooooooo see u...
        </div>
        <div id="scramble3">
            and...sorry  this page is developing...and i don't know what ... what this page will be...  
        </div>
        <div id="scramble4">
            (end... :-)  
        </div>

        <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/tweenmax.min.js'></script>
        <script src="js/scrambletextplugin.min.js"></script>


    </body>
</html>

 

 

 

css

body {
    background-color: rgb(0, 0, 0);
}
div {
    font-size: 60%;
}
.class1 {
    background-color: rgb(0, 0, 0);
    color: rgb(21, 170, 8);
}
.class2 {
    background-color: rgb(0, 0, 0);
    color: rgb(28, 224, 10);
    font-family: arial, helvetica, sans-serif;

}

 

结束疗~ 如果有错误或者需要改进的欢迎在评论区留言，我会尽快回复和改正的！谢谢浏览~

或者html/css/js 的结构写的不漂亮的话也欢迎大家指出来！谢谢！

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网