HTML5实现移动端弹幕动画效果
导读:收集整理的这篇文章主要介绍了HTML5实现移动端弹幕动画效果,觉得挺不错的,现在分享给大家,也给大家做个参考。 思路1.把单个内容编辑好,计算自身宽度,确定初始位置 2.移动的距离是屏幕宽度3.js动态的添加css动画函数,将高度...
收集整理的这篇文章主要介绍了HTML5实现移动端弹幕动画效果,觉得挺不错的,现在分享给大家,也给大家做个参考。 思路
1.把单个内容编辑好,计算自身宽度,确定初始位置
2.移动的距离是屏幕宽度
3.js动态的添加css动画函数,将高度、动画移动时间、动画延迟时间都用随机数控制
代码:
htML骨架结构
(以三个为例,如果觉得界面太长不友好,也可以js动态的生成)
div class="cute-barrage"> div class="barrage-div"> img src="http://kw1-1253445850.file.myqcloud.COM/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg"/> span> 一月一度的花呗还款期到啦i> 哈哈哈/i> /span> /div> div class="barrage-div"> img src="http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg"/> span> 坐等发工资i> 呵呵呵/i> /span> /div> div class="barrage-div"> img src="../../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: 0 0.1rem; line-height: 0.6rem; //内联块元素,居中对齐四个缺一不可 height: 0.6rem; //内联块元素,居中对齐四个缺一不可 display: inline-block; //内联块元素,居中对齐四个缺一不可 vertical-align: middle; //内联块元素,居中对齐四个缺一不可 i{ color: #fe5453; font-weight: 700; } } } }
js动态动画实现(zepto.js)
//弹幕VAR winWidth = $(window).width(); //获取屏幕宽度$(".barrage-div").each(function(index,value){ //遍历每条弹幕 var width = $(value).width(); //获取当前弹幕的宽度 var topRandom = Math.floor(Math.random() * 3) + 'rem'; //获取0,1,2的随机数 可根据情况改变 $(value).css({ "right":-width,"top":topRandom} ); //将弹幕移动到屏幕外面,正好超出的位置 //拼写动画帧函数,记得每个ani要进行区分,宽度从自己的负宽度移动一整个屏幕的距离 var keyframes = `\ @keyframes ani${ index} { form{ right:${ -width} px; } to{ right:${ winWidth} px; } } \ @-webkit-keyframes ani${ index} { form{ right:${ -width} px; } to{ right:${ winWidth} px; } } `; //添加到页面的head标签里面 $("style> ").attr("tyPE","text/css").html(keyframes).appendTo($("head")); //定义动画速度列表 var aniList = [3,5,7,9,11]; //取数组的随机数,0,1,2,3,4 var aniTime =Math.floor(Math.random() * 5); //给当全前弹幕添加animation的css //延迟的时间用每个的*1.5倍,这个可变 $(value).css({ "animation":`ani${ index} ${ aniList[aniTime]} s linear ${ index * 1.5} s`,"-webkit-animation":`ani${ index} ${ aniList[aniTime]} s linear ${ index * 1.5} s`} ); } )
总结
以上所述是小编给大家介绍的HTML5实现移动端弹幕动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML5实现移动端弹幕动画效果
本文地址: https://pptw.com/jishu/585975.html