如何实现HTML5移动端弹幕动画效果
导读:本文共2013.5字符,通常情况下阅读需要7分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 思路1.把单个内容编辑好,计算自身宽度,确定初始位置2.移动的距离是屏幕宽度3.js动态的添加css动画函数,将高度、动画移动时间、动画延迟时间都用随机数控制代码:html骨架结构(以三个为例,如果觉得界面太长不友好,也可以js动态的生成)<divclass="cute-barrage"><divclass="b... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。思路
1.把单个内容编辑好,计算自身宽度,确定初始位置
2.移动的距离是屏幕宽度
3.js动态的添加css动画函数,将高度、动画移动时间、动画延迟时间都用随机数控制
代码:
html骨架结构
(以三个为例,如果觉得界面太长不友好,也可以js动态的生成)
<divclass="cute-barrage"><divclass="barrage-div"><imgsrc="https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/nreis3wmpnd.jpg"/><span>一月一度的花呗还款期到啦<i>哈哈哈</i></span></div><divclass="barrage-div"><imgsrc="https://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/yft0cntabmm.jpg"/><span>坐等发工资<i>呵呵呵</i></span></div><divclass="barrage-div"><imgsrc="../../static/cutePresent/resource/avatar.png"/><span>变有钱变有钱<i>耶耶耶</i></span></div></div>
css样式
.cute-barrage是确定展示范围和位置,宽度为100%,高度自定,横向超出部分隐藏
.barrage-div 内容部分,长度由内容决定,确定相对父级的位置;
html,body{width:100%;}.cute-barrage{width:100%;height:4rem;/*确定弹幕长度*/position:absolute;top:1.5rem;/*确定弹幕高度*/left:0;overflow-x:hidden;/*横向超出部分隐藏*/.barrage-div{position:absolute;top:0;right:-100%;/*保证一开始在界面外侧,从右向左就是right,从左向右就是left*/height:0.6rem;background-color:rgba(255,255,255,0.9);border-radius:2rem;white-space:nowrap;/*确保内容在一行显示,不然移动到最后会折行*/img{width:0.5rem;height:0.5rem;vertical-align:middle;//内联块元素,居中对齐padding-left:0.05rem;border-radius:50%;}span{font-size:14px;padding:00.1rem;line-height:0.6rem;//内联块元素,居中对齐四个缺一不可height:0.6rem;//内联块元素,居中对齐四个缺一不可display:inline-block;//内联块元素,居中对齐四个缺一不可vertical-align:middle;//内联块元素,居中对齐四个缺一不可i{color:#fe5453;font-weight:700;}}}}
js动态动画实现(zepto.js)
//弹幕varwinWidth=$(window).width();//获取屏幕宽度$(".barrage-div").each(function(index,value){//遍历每条弹幕varwidth=$(value).width();//获取当前弹幕的宽度vartopRandom=Math.floor(Math.random()*3)+'rem';//获取0,1,2的随机数可根据情况改变$(value).css({"right":-width,"top":topRandom});//将弹幕移动到屏幕外面,正好超出的位置//拼写动画帧函数,记得每个ani要进行区分,宽度从自己的负宽度移动一整个屏幕的距离varkeyframes=`@keyframesani${index}{form{right:${-width}px;}to{right:${winWidth}px;}}@-webkit-keyframesani${index}{form{right:${-width}px;}to{right:${winWidth}px;}}`;//添加到页面的head标签里面$("<style>").attr("type","text/css").html(keyframes).appendTo($("head"));//定义动画速度列表varaniList=[3,5,7,9,11];//取数组的随机数,0,1,2,3,4varaniTime=Math.floor(Math.random()*5);//给当全前弹幕添加animation的css//延迟的时间用每个的*1.5倍,这个可变$(value).css({"animation":`ani${index}${aniList[aniTime]}slinear${index*1.5}s`,"-webkit-animation":`ani${index}${aniList[aniTime]}slinear${index*1.5}s`});})
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:
如何实现HTML5移动端弹幕动画效果的详细内容,希望对您有所帮助,信息来源于网络。