TweenMax—ScrambleText插件 实现类似电脑破译密码的特效
首先贴一下TweenMax的中文网：https://www.tweenmax.com.cn/
首先先展示一下最后的效果，需要的就继续看下去：
那团乱码是会一直变的
那么如何实现上图的效果呢？？？
其实就是运用了TweenMax的插件ScrambleTextPlugin（在这个页面可以下载：https://www.tweenmax.com.cn/source/）
代码如下：
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(, , );
}
div {
font-size: %;
}
.class1 {
background-color: rgb(, , );
color: rgb(, , );
}
.class2 {
background-color: rgb(, , );
color: rgb(, , );
font-family: Arial, Helvetica, sans-serif; }
结束疗~ 如果有错误或者需要改进的欢迎在评论区留言，我会尽快回复和改正的！谢谢浏览~
或者html/css/js 的结构写的不漂亮的话也欢迎大家指出来！谢谢！
TweenMax—ScrambleText插件 实现类似电脑破译密码的特效的更多相关文章
- kettle系列-[KettleUtil]kettle插件，类似kettle的自定义java类控件
该kettle插件功能类似kettle现有的定义java类插件,自定java类插件主要是支持在kettle中直接编写java代码实现自定特殊功能,而本控件主要是将自定义代码转移到jar包,就是说自定义 ...
- Duilib实现类似电脑管家扫描目录效果
实现原理: 1.后台开线程遍历目录,遍历出一个文件路径在界面上更新显示(通过发消息通知主界面) 2.需要扩展一下Duilib控件,在此我扩展了CLabelUI,重写了PaintText函数 扩展控件的 ...
- js插件---在线类似excel生成图表插件解决方案
js插件---在线类似excel生成图表插件解决方案 一.总结 一句话总结:google比百度好用多了,多用google google js editable table jquery 双向绑定 这种 ...
- CSDN开源夏令营 基于Compiz的switcher插件设计与实现之compiz特效插件介绍及特效实现
compiz自带的特效插件不够多,也不够强大.为了更好的体验compiz的特效,我们能够安装特效插件,在终端输入命令:sudo apt-get install compiz-plugins就能够下载特 ...
- PowerToys插件扩展(类似Alfred)
在mac系统除了自带的Spotlight还有一个很好用的工具叫Alfred image 在windows系统也有一个很好用的工具叫PowerToys,是微软的一个开源项目 image https:// ...
- jquery.SuperSlide.js只需要调用一个插件就能实现网页大部分特效--推荐
很棒的一个插件,http://www.superslide2.com/
- 容易上手-类似ERP系统 简单特效
今天大概简单写一个效果, 这个效果 很容易 上手的: html: <style type="text/css">.menu_list ul{display:none;} ...
- eclipse安装插件的各种方法
做为当下最流行的开源IDE之一,Eclipse的一大优势就在于其无数优秀的插件.一个好的插件可以大大的提高我们的工作效率,学习如何安装Eclipse插件自然也是必修课了.下面介绍Eclipse插件的安 ...
- 【Android Studio安装部署系列】二十四、Android studio中Gradle插件版本和Gradle版本关系
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 在从Android Studio3.0.0版本升级到Android Studio3.0.1版本的时候,出现了一个问题,需要升级Gra ...
随机推荐
- 第07组 Alpha冲刺（4/6）
队名:摇光 队长:杨明哲 组长博客:求戳 作业博客:求再戳 队长:杨明哲 过去两天完成了哪些任务 文字/口头描述:摇光测评的相关功能. 展示GitHub当日代码/文档签入记录:(组内共用,已询问过助教 ...
- 【软工实践】Beta冲刺（1/5）
链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 登陆注册.查看用户信息.添加用户任务.查看任务等API的完善 tomcat的学 ...
- git 清除所有untracked file
上次合并分支的时候,出现了一些没见过的文件,有.orig等等.如下图: 接下来,就是git的神奇操作命令: git clean -f 将所有untracked file 一次性删除
- Cesium学习笔记-工具篇20-PrimitiveTexture自定义渲染-贴图【转】
前几篇博客我们了解了自定义点.线.面绘制,这篇我们接着学习cesium自定义纹理贴图.我们完成点线面的绘制,只是绘制出了对象的框架,没有逼真的外观.逼真外观是需要设置材质来实现:Material . ...
- Windows server 2012 英文系统 中文软件显示乱码的问题
1.安装语言包 Start -> Control Panel -> Language 如果没有中文,请点击 Add a language 添加可能需要 联网下载语言包,按照要求下载即可 ...
- 如何通过配置tomcat或是web.xml让ie直接下载文件
web.xml(tomcat\conf\web.xml)中配置了 <mime-mapping> <extension>txt</extension> < ...
- 不使用BASE64Encoder、BASE64Decoder
BASE64Encoder/BASE64Decoder类在sun.misc包下,是sun公司的内部方法,后期有删除的潜在可能,建议使用apache commons.codec下的Base64替代. m ...
- what's the RTP协议
what's the RTP RTP全名是Real-time Transport Protocol(实时传输协议).它是IETF提出的一个标准,对应的RFC文档为RFC3550(RFC1889为其过期 ...
- Python高级笔记（十）闭包
1. 闭包 #!/usr/bin/python # -*- encoding=utf- -*- def test(number): # 在函数里面再定义一个函数,并且这个函数用到外边函数的变量,那么将 ...
- 报错：sqoop2执行job时：Exception: Job Failed with status:3
报错背景: 创建完成sqoop2的一个job,主要功能是将数据从hdfs存到mysql数据库中. 执行job的时候发生报错. 报错现象: sqoop:> start job -j -s Subm ...