html手机页面弹幕效果,H5移动端弹幕动画实现
需求
已知20条内容要有弹幕效果,分成三层,速度随机。
先来看看效果:
小小弹幕效果.gif
所以这里不考虑填写生成的。只是一个展现的效果。
如果要看填写生成的,请不要浪费Time
思路把单个内容编辑好,计算自身宽度,确定初始位置
移动的距离是屏幕宽度
js动态的添加css动画函数,将高度、动画移动时间、动画延迟时间都用随机数控制
mind.png
代码
html骨架结构
(太长了,以三个为例,如果觉得界面太长不友好,也可以js动态的生成)
么么嗒今天提现1Q币
橘色的大耳朵猫今天提现5Q币
丶鹿锅里面装着吴奶包今天提现3Q币
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标签里面
$("
//定义动画速度列表
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`});
})
之后看看浏览器的效果:
css.png
html.jpg
@version1.0——2018-8-22——创建《H5移动端弹幕动画实现》
©burning_韵七七
作者:顽皮的雪狐七七
链接:https://www.jianshu.com/p/52647d1282eb
html手机页面弹幕效果,H5移动端弹幕动画实现相关推荐
- html制作手机预览效果,新移动端Html5方式预览报表插件
2. Html5报表制作及手机效果 2.1 手机页面大小 制作手机上的报表与PC端报表制作过程是一样的,为了让用户制作出适合手机尺寸的报表,在模板>>移动端属性地方,勾选设置为手机模板画布 ...
- java实现视频弹幕效果,SpringBoot实现视频弹幕功能 DanmuPlayer插件的使用
前几天朋友让帮忙做一个视频弹幕网站,在找弹幕实现上发现了一个不错的开源的插件. 本文介绍一下基本使用. 一.下载插件和官方示例 直接从官网下载,可以运行官方的 demo 例子先玩一下. 我这里进行了一 ...
- java实现弹幕效果_css3实现蒙版弹幕功能
摘要:这篇CSS3栏目下的"css3实现蒙版弹幕功能",介绍的技术点是"CSS3.蒙版.功能.弹幕.实现",希望对大家开发技术学习和问题解决有帮助. 最近在b站 ...
- 手机翻书效果html,移动端实现翻书效果
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scal ...
- php手机浏览器获取经纬度,H5移动端调用浏览器Geolocation方法获取手机gps经纬度方法...
具体请看下面代码: var x=document.getElementById("demo"); function getLocation() { if (navigator.ge ...
- html纯css页面滑动效果,纯css3滑动按钮动画效果
android系统的滑动按钮相信大家都使用过.这款插件就是使用纯css3制作出类似android系统的滑动按钮效果. HTML html代码十分简单.使用一个大的div作为包裹容器,给它一个class ...
- c#控件弹幕效果_基于C#弹幕类射击游戏的实现——(十)整合
先看实现的效果 剩下部分代码,首先是入口,MainForm public partial class MainForm : Form { public MainForm() { // // The I ...
- c#控件弹幕效果_基于C#弹幕类射击游戏的实现——(二)渲染
这个游戏打算是用C#+GDI做~所以渲染效率上还是要进行一些考虑的 public interface IRenderHandler { void Clear(Color backgroundColor ...
- c#控件弹幕效果_基于C#弹幕类射击游戏的实现——(六)爆炸效果
接下来就像填充积木一样,把GameScene里用到的东西一个个写完~~ 先来个最简单的.GameBomb 一目了然 public class GameBomb : GameObject { publi ...
最新文章
- 关于《写给青少年的数学故事:代数奇思》“二维码”一文的声明
- thymeleaf中遇到的坑
- mycat mysql好可用架构_想要学会MyCat高可用集群搭建,但是这些知识点却还玩不明白?...
- python什么时候用框架_python时间模块的使用
- python 使用 sorted 对 列表嵌套元组的数据进行排序
- git-svn — 让git和svn协同工作
- 发布react项目到linux服务器,nginx上部署react项目的实例方法
- 图解Linux内核:内核启动(1)从Bootloader到内核代码
- intelj idea安装和配置
- 操作系统PPT(持续更新)
- 小米用户画像实战,48页PPT下载
- 微信公众号 菜单 { “errcode“: 47001, “errmsg“: “data format error rid: 61b36b ...“}
- notimplementedexception
- 给未来的电子工程师nbsp;---电子牛人给…
- html语音合成text2audio讯飞,python讯飞语音合成
- 智能体重秤方案/案列/APP/小程序
- vue-cli 项目启动输出 INFO Starting development server... 69o/o after emitting CopyPlugin
- 【JSP】JSP简单介绍
- sql超键 候选键 主键
- 写诗软件这里为什么会如此成功?
热门文章
- 端口映射工具:ngrok的使用
- 使用贝叶斯优化工具实践XGBoost回归模型调参
- 吕梁市人民政府刘晋萍副市长率团访问启迪控股
- 以智能钻井为例,深度解析数字油田的智能化建设
- 大多数人没听过的FreeEIM飞鸽传书,超炫酷的仿QQ,九零后都爱玩
- 密码学笔记5 非对称密钥算法
- php html转换成word,php如何实现html转换word?_后端开发
- \Qt5\\bin\\d3dcompiler_47.dll
- java中虚函数_虚函数
- RabbitMQ学习笔记:消息追踪Firehose功能详解