新增第170个小实例：打散文字随机浮动特效
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
e9eb598cb4
commit
b1d6fe0252
|
|
@ -176,4 +176,5 @@
|
|||
166. HTML5+CSS3+JS小实例：霜雾玻璃图片预览特效
|
||||
167. HTML5+CSS3+JS小实例：鼠标滚轮水平滚动
|
||||
168. HTML5+CSS3+JS小实例：仿优酷视频轮播图
|
||||
169. HTML5+CSS3小实例：网页底部间隔波浪动画特效
|
||||
169. HTML5+CSS3小实例：网页底部间隔波浪动画特效
|
||||
170. HTML5+CSS3+JS小实例：打散文字随机浮动特效
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
#text{
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
width: 80vw;
|
||||
line-height: 1.5;
|
||||
margin: 100px auto;
|
||||
}
|
||||
#btn{
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
border: 1px solid #fff;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>打散文字随机浮动特效</title>
|
||||
<link rel="stylesheet" href="170.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<article>
|
||||
<p id="text">你说帘外海棠，锦屏鸳鸯；后来庭院春深，咫尺画堂。你说笛声如诉，费尽思量；后来茶烟尚绿，人影茫茫。你说可人如玉，与子偕臧；后来长亭远望，夜色微凉。你说霞染天光，陌上花开与谁享；后来烟笼柳暗，湖心水动影无双。你说彼岸灯火，心之所向；后来渔舟晚唱，烟雨彷徨。你说水静莲香，惠风和畅；后来云遮薄月，清露如霜。你说幽窗棋罢，再吐衷肠；后来风卷孤松，雾漫山冈。你说红袖佯嗔，秋波流转思张敞；后来黛眉长敛，春色飘零别阮郎。你说暗香浮动，刹那光芒；后来玉殒琼碎，疏影横窗。你说良辰美景，乘兴独往；后来红尘紫陌，雪落太行。你说赋尽高唐，三生石上；后来君居淄右，妾家河阳。你说玉楼朱颜，飞月流觞迎客棹；后来幽谷居士，枕琴听雨卧禅房。你说高山流水，客答春江；后来章台游冶，系马垂杨。你说锦瑟韶光，华灯幢幢；后来荼蘼开至，青苔满墙。你说天地玄黄，风月琳琅；后来月斜江上，云淡天长。</p>
|
||||
<button id="btn">放松一下</button>
|
||||
</article>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<!-- 引入插件 -->
|
||||
<script src="neontext.min.js"></script>
|
||||
<script>
|
||||
// 要操作的元素
|
||||
// 按钮
|
||||
const resetBtn=document.getElementById('btn');
|
||||
// 初始化
|
||||
const neontext=new Neontext('text');
|
||||
// 打乱文字
|
||||
neontext.render.run();
|
||||
|
||||
// 为按钮绑定点击事件
|
||||
resetBtn.addEventListener('click',function(){
|
||||
// 文字恢复
|
||||
neontext.render.killer();
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1 @@
|
|||
function Neontext(n){var e=document.getElementById(n),o=e.innerText.split(""),t=this;window;this.resetTime=10,this.color=["#f44336","#e91e63","#9c27b0","#673ab7","#3f51b5","#2196f3","#03a9f4","#00bcd4","#009688","#4caf50","#8bc34a","#cddc39","#ffeb3b","#ffc107","#ff9800","#ff5722","#795548","#9e9e9e","#607d8b"],this.randomColor=function(){var n=Math.floor(this.color.length*Math.random());return this.color[n]},this.posRangencala=function(){return e.hasAttribute("ele-range")?{minRange:{x:e.offsetLeft,y:e.offsetTop},maxRange:{x:e.offsetLeft+e.offsetWidth,y:e.offsetTop+e.offsetHeight}}:{minRange:{x:0,y:0},maxRange:{x:document.documentElement.clientWidth,y:document.documentElement.clientHeight}}},this.spanArr=function(){e.innerHTML="";var n=[];return o.forEach(function(o,s){var a=document.createElement("span");a.style.display="inline-block",a.innerHTML=o,a.style.position="relative",a.style.zIndex=e.hasAttribute("ele-range")?"1":"-1",a.style.color=t.randomColor(),a.own={pos:{x:0,y:0},ran:{x:-.5+Math.random(),y:-.5+Math.random()},speed:{x:1,y:1},dir:{x:1,y:1}},e.appendChild(a),n.push(a)}),n}(),this.spanOrigin=function(){this.spanArr.forEach(function(n,e){n.own.realPos={minx:n.offsetLeft,maxx:n.offsetLeft+n.offsetWidth,miny:n.offsetTop,maxy:n.offsetTop+n.offsetHeight}}),this.posRangen=this.posRangencala()},this.spanOrigin(),this.resetpos=function(){this.spanOrigin(),console.log(e+"===="+this.spanArr[0].own.pos.x+"===="+this.posRangen.maxRange.x),this.spanArr.forEach(function(n,e){n.own.realPos.minx+n.own.pos.x<t.posRangen.minRange.x&&(n.own.pos.x=0),n.own.realPos.maxx+n.own.pos.x>t.posRangen.maxRange.x&&(n.own.pos.x=0),n.own.realPos.miny+n.own.pos.y<t.posRangen.minRange.y&&(n.own.pos.y=0),n.own.realPos.maxy+n.own.pos.y>t.posRangen.maxRange.y&&(n.own.pos.y=0)})},this.floatText=function(){this.spanArr.forEach(function(n,e){(n.own.realPos.minx+n.own.pos.x<t.posRangen.minRange.x||n.own.realPos.maxx+n.own.pos.x>t.posRangen.maxRange.x)&&(n.own.dir.x=-n.own.dir.x),(n.own.realPos.miny+n.own.pos.y<t.posRangen.minRange.y||n.own.realPos.maxy+n.own.pos.y>t.posRangen.maxRange.y)&&(n.own.dir.y=-n.own.dir.y),n.own.pos.x+=n.own.ran.x*n.own.speed.x*n.own.dir.x,n.own.pos.y+=n.own.ran.y*n.own.speed.y*n.own.dir.y,n.style.transform="translateX("+n.own.pos.x+"px) translateY("+n.own.pos.y+"px)"})},this.floatBack=function(){if(this.spanArr.forEach(function(n,e){var o=n.own.pos.x-n.own.pos.x*t.resetTime/100,s=n.own.pos.y-n.own.pos.y*t.resetTime/100;n.style.transform="translateX("+o+"px) translateY("+s+"px)"}),100===this.resetTime)return cancelAnimationFrame(t.send),!0;this.resetTime+=5},this.restart=function(){this.spanArr.forEach(function(n,e){n.own.pos.x=0,n.own.pos.y=0})},this.render={run:function(){t.sren=requestAnimationFrame(t.render.run),t.floatText()},end:function(){t.send=requestAnimationFrame(t.render.end),t.floatBack()},killer:function(){t.floatBack()?(cancelAnimationFrame(t.send),t.restart(),t.resetTime=10,t.render.run()):(cancelAnimationFrame(t.sren),t.render.end())}},window.onresize=function(){t.resetpos()}}
|
||||
Loading…
Reference in New Issue