jQ 狂野飙车9加载动画V1.1
响应国家号召,在家里待着实在是没啥娱乐方式,就下了狂野飙车9玩,期间对它这个加载动画很喜欢,觉得能搞下来,就自己仿着样式写了个加载动画,这个动画以后将加入的我的自用主题效果,废话不多说,上图!
更新
2020-2-3
- 优化的最后阶段动画展示方式
- 修复快结束动画的时候,窗口发生变化导致的动画重载
- 针对部分宽屏做了初始化原汁原味效果(默认显示固定方格位置的背景图)
预览图
教程
设置颜色
<div id="aligame" data-theme='{"backgroundColor":"#1b2a2f","borderColor":"#203c39","loadColor":"#e63a62"}'>
</div>
id为aligame的元素有一个data-theme的属性,他的值为一个对象,有三个键值对:
键 | 值 | 说明 | 是否必须 |
---|---|---|---|
backgroundColor | 颜色值,可以为16进制,rgb,rgba,hsl | 该值为加载动画的背景色 | 是 |
borderColor | 颜色值,可以为16进制,rgb,rgba,hsl | 该值为方块的边框颜色 | 是 |
loadColor | 颜色值,可以为16进制,rgb,rgba,hsl | 该值为右下角加载动画的颜色 | 是 |
背景图也可自行替换,但是一定要在css文件中修改或者直接替换掉对应的背景图文件
触发的方式
jq的ready方法中,表示demo已经加载完毕了,然后我又加了一个对背景图的判断,由于该效果本身就很依赖背景图,所以我判断是当背景图加载完毕后出发loadEnd()
方法然后触发动画,最后整个遮罩层消失。
判断背景图是否加载完毕的方法为:aligame_bg_load()
该方法在初始化方格creatGrid()
方法的末尾运行。
demo
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可,禁止转载。
评论
最新文章
如何在项目中使用一个自定义的npm模块(如何使用一个魔改后的npm模块)
0点赞
·
1评论
Debian12 更新系统版本(目前更新至12.5版本)
0点赞
·
0评论
Nestjs CORS配置和生产环境处理
1点赞
·
0评论
Debian12 SSH连接报错:Error Handshake failed no matching host key format
0点赞
·
0评论
Prisma 使用MongoDB创建数据时报错:Prisma needs to perform transactions, which requires your MongoDB server to be run as a replica set.
0点赞
·
0评论
暂无评论数据