HTML5实现移动端弹幕动画效果


Posted in HTML / CSS onAugust 01, 2019

思路

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实现移动端弹幕动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 #HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 #HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 #HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 #HTML / CSS
Canvas图片分割效果的实现
Jul 29 #HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 #HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 #HTML / CSS
You might like
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
mysql时区问题
2008/03/26 PHP
PHP获取网站域名和地址的代码
2008/08/17 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
BootStrap的两种模态框方式
2017/05/10 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python基本语法经典教程
2016/03/11 Python
Python虚拟环境项目实例
2017/11/20 Python
Python判断两个对象相等的原理
2017/12/12 Python
python 获取字符串MD5值方法
2018/05/29 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
资深生产主管自我评价
2013/09/22 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
前台接待岗位职责范本
2015/04/03 职场文书