H5粒子插件测试
本帖最后由 马黑黑 于 2023-9-8 18:33 编辑 <br /><br /><style>#mydiv {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: linear-gradient(to top right, tan, black);
box-shadow: 3px 3px 20px #000;
overflow: hidden;
position: relative;
z-index: 1;
}
</style>
<div id="mydiv"></div>
<script>
(function () {
let jf = document.createElement('script');
jf.src = 'https://638183.freep.cn/638183/web/lizi/h5lz_01.js';
document.body.appendChild(jf);
jf.onload = () => {
H5lz({
papa: '#mydiv',
total: 100,
size: {width: 15, height: 15},
shape: {background: '', borderRadius: ''},
maxTime: 24,
offset: {x: 0, y: 0},
ani: 'toBottom',
});
};
})();
</script>
本帖最后由 马黑黑 于 2023-9-8 20:29 编辑
插件加载和配置代码
<script>
let jf = document.createElement('script');
jf.src = 'https://638183.freep.cn/638183/web/lizi/h5lz_01.js';
document.body.appendChild(jf);
jf.onload = () => {
H5lz({
papa: '#mydiv',
total: 100,
size: {width: 15, height: 15},
shape: {background: '', borderRadius: ''},
maxTime: 24,
offset: {x: 0, y: 0},
ani: 'toBottom',
});
};
</script>
代码解释
03-05行：加载插件到 body 中；
07-17行：插件文档加载后配置插件，其中——
H5lz({
/* 具体配置代码写在这里 */
});
具体配置在楼下解释
本帖最后由 马黑黑 于 2023-9-8 21:23 编辑
【简介】
H5粒子插件，当前是 v01 版本。所谓H5，指 HTML5，插件使用 HTML 标签构建粒子，并通过 CSS @keyframes 驱动粒子运动。总体上，H5粒子插件基于 HTML5 + CSS3，JS方面遵循 ES6 标准。
ver01 版本代码不足一百行，文档未压缩体积不足3Kb，引用和下载地址：https://638183.freep.cn/638183/web/lizi/h5lz_01.js
【插件配置】
在本论坛，请按本帖二楼介绍的方法引用插件，这里仅详细说明插件的配置，共七个参数：
① papa
指定需要显示粒子的元素，值为字符串值（需要引号包裹值，下同），具体值为 id 或 class 表达法，例如：
<div id="mybox"></div>
则，papa 配置这么写：
papa: '#mybox',
而：
<div class="mybox"></div>
则，papa 这么配置：
papa: '.mybox',
注意，当使用 class 时，插件只作用于第一个 class=“xx" 的元素。
当 papa 参数未指定，插件将作用于 body，且当 body 的高度低于浏览器视口高度是，插件将对 body 做如下设置：其一，body 的高度为视口高度；其二，滚动条设置为 hidden。
② total
设置粒子总数，值为数值（不能用引号包裹值，下同）。缺省将由插件自行设置。由于使用关键帧驱动，粒子总数对资源的消耗不明显，可以根据需要大胆设置，但不应过分。
③ size
粒子尺寸，值为 Object 对象，需要花括号包裹个键值对（下同）。键值对共两组，健名分别是 width 和 height，分别指向粒子的宽、高，键值为数值，键值对之间用小角逗号隔开：
size: {width: 10, height: 10},
缺省则由插件自行配置。
④ shape
配置粒子形状，值为 Object 对象，共两个键值对，健名是 background 和 borderRadius（注意大小写）。其中，background 是粒子的背景设置，支持颜色表达、渐变背景、图片背景；borderRadius 对应 CSS的 border-radius 属性。键值均为字符串值。
⑤ maxTime
设置关键帧动画最高周期运行时长，对应的是 duration 属性，数值。设置此值，每一个粒子的一个运动周期都将在它的一半到它的本值之间选择一个数值。
⑥ offset
粒子运动偏移量配置，值为 Object 对象，两个子对象，x 指水平方向偏移量，作用于上、下运动的粒子；y 值垂直方向偏移量，作用于左、有运动的粒子。x、y 偏移量值为数值，支持正、负数。
偏移量对粒子运动的作用，表现在粒子朝东、南、西、北运动是或向上、向下、向左、向右偏移。
⑦ ani
指定动画方向，字符串值，可选四个值——
其一，自上而下：toBottom
其二，自下而上：toTop
其三，自左向右：toRight
其四，自右向左：toLeft
最后在强调一下：给参数赋值时，对象值要使用花括号 {} 将键值对群包裹起来，值为字符串要用小角引号 '' 或 "" 包裹起来，值为数值不要用引号、不要使用单位。
【粒子交互】
其实就是粒子的运动与暂停，它依赖于 CSS 变量 --state，该变量的 paused 和 running 值将使得例子暂停、运动。
可以回帖了吧 黑黑的新粒子效果出来了{:4_199:}
这个粒子好像以前有过的，这个写明是H5和黑黑以前的纯代码粒子有什么区别？ 很喜欢这样的小粒子，等着看精彩的作业{:4_187:} 小辣椒 发表于 2023-9-8 19:21
可以回帖了吧
可以可以 小辣椒 发表于 2023-9-8 19:24
黑黑的新粒子效果出来了
这个粒子好像以前有过的，这个写明是H5和黑黑以前的纯代码粒子有什么 ...
区别不大，这个是封装 千羽 发表于 2023-9-8 19:28
很喜欢这样的小粒子，等着看精彩的作业
最近忙，都不怎么做帖 马黑黑 发表于 2023-9-8 19:37
最近忙，都不怎么做帖
俺有的是耐心，慢慢等{:4_173:} 千羽 发表于 2023-9-8 19:39
俺有的是耐心，慢慢等
嗯。这些粒子效果，其实之前是有的，这里只是封装成插件 本帖最后由 千羽 于 2023-9-8 21:18 编辑 <br /><br />马黑黑 发表于 2023-9-8 19:39
嗯。这些粒子效果，其实之前是有的，这里只是封装成插件
是啊，我好像做过的{:4_181:} 是这个吗？有点不像
<style>
#papa {
margin: 120px 0 0 calc(59% - 681px);
width: 1200px;
height: 629px;
background: gray url('http://bohann.net/tupian/data/attachment/forum/202303/12/173253tfnz4kakkccb6c8b.jpg') no-repeat center/cover;
display: grid;
place-items: center;
box-shadow: 3px 3px 20px #000;
perspective: 1000px;
overflow: hidden;
user-select: none;
position: relative;
z-index: 1;
}
#mplayer {
position: absolute;
bottom: 20px;
grid-template-columns: auto auto auto;
gap: 6px;
display: grid;
place-items: center;
color: hsl(0, 100%, 100%);
font: normal 16px sans-serif;
z-index: 999;
}
#btnplay {
--state: paused;
margin-right: -4px;
width: 30px;
height: 30px;
font: bold 30px/30px serif;
text-align: center;
cursor: pointer;
animation: rot 4s infinite linear;
animation-play-state: var(--state);
}
#prog {
width: 200px;
height: 20px;
opacity: .95;
cursor: pointer;
}
.stars {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: silver;
transform-style: preserve-3d;
}
@keyframes move { to { transform: rotate(0) translate3d(0, 0, 0); } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<div id="mplayer">
<span id="btnplay">✿</span>
<meter id="prog" low="30" high="90" max="100" optimum="100" value="1"></meter>
<span id="tmsg">00:00 | 00:00</span>
</div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1926943356.mp3" loop autoplay></audio>
<script>
(function() {
(function() {
for(j=0; j<500; j++) {
let ele = document.createElement('span');
ele.className = 'stars';
ele.style.cssText += `
left: ${Math.random() * 400 + 450}px;
top: ${Math.random() * 80 + 100}px;
background: hsl(${Math.random() * 360}, ${Math.random() * 50 + 40}%,${Math.random() * 60 + 30}%);
box-shadow: 0 0 5px hsla(0,10%,100%,.25);
transform: rotate(${Math.random() * 360 + 360}deg) translate3d(${Math.random() * 400 + 100}px,${Math.random() * 300}px,${Math.random() * 900}px);
animation: move 100s infinite alternate ${-10 - Math.random() * 20}s linear;
`;
papa.appendChild(ele);
}
})();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => aud.play());
aud.addEventListener('timeupdate', () => {
prog.value = aud.currentTime / aud.duration * 100;
tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;
});
let mState = () => btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
})();
</script>
本帖最后由 千羽 于 2023-9-8 19:57 编辑
千羽 发表于 2023-9-8 19:42
本帖最后由 千羽 于 2023-9-8 19:48 编辑
是啊，我好像做过的 是这个吗？有点不像
怎么没有声音？我刚才换了浏览器也没听到{:4_203:}
黑黑老师，你删掉吧，不是这些小粒子，还没有声音{:4_201:}
千羽 发表于 2023-9-8 19:42
本帖最后由 千羽 于 2023-9-8 19:48 编辑
是啊，我好像做过的 是这个吗？有点不像
这个就更复杂了，本帖介绍的插件暂时不支持这么复杂的 千羽 发表于 2023-9-8 19:53
怎么没有声音？我刚才换了浏览器也没听到
黑黑老师，你删掉吧，不是这些小粒子，还没有声音{:4 ...
这个没事 马黑黑 发表于 2023-9-8 19:37
区别不大，这个是封装
哦，是封装的，知道了 这个封装好，还能控制粒子的方向和偏移量以及运行周期，考虑得十分详尽{:4_199:} 红影 发表于 2023-9-8 20:48
这个封装好，还能控制粒子的方向和偏移量以及运行周期，考虑得十分详尽
因为局限于 @keyframes，目前运动方向还是比较少 小辣椒 发表于 2023-9-8 20:37
哦，是封装的，知道了
最简单的配置： H5lz({papa: '#papa'}); 马黑黑 发表于 2023-9-8 20:30
这个没事
黑黑老师，给你加音乐了{:4_173:}，是否删掉你定哈，我删不掉