森林

马黑黑 · 发表于 2024-4-16 07:49

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-4-16 07:52 编辑

马黑黑 · 发表于 2024-4-16 07:54

帖子代码

<style>

#mydiv { margin: 0 0 0 calc(50% - 721px); width: 1280px; height: 800px; background: lightgreen url('https://638183.freep.cn/638183/t24/1/levels.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; box-sizing: border-box; overflow: hidden; z-index: 1; position: relative;}

#mydiv::before , #mydiv::after { position: absolute; content: ''; left: var(--begin1); top: 0px; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/t24/1/forest.jpg') no-repeat center/cover; z-index: -1;}

#mydiv::after { left: var(--begin2); transform: scale(-1,1);}

#play { position: absolute; left: calc(50% - 50px); top: 10px; width: 100px; cursor: pointer; animation: rotating 5s linear infinite var(--state); z-index: 100;}

#vid { position: absolute; right: 0; width: 40%; height: 30%; object-fit: cover; mix-blend-mode: screen; transform: rotate(-15deg); pointer-events: none;}

canvas { z-index: 99; pointer-events: none; }

@keyframes rotating { to { transform: rotate(360deg); } }

</style>

</div>

var sF = document.createElement('script');

sF.charset = 'utf-8';

sF.src = 'https://638183.freep.cn/638183/web/js/ball-lz.js';

document.body.appendChild(sF);

var lz = {papa: 'body', total: 100, maxsize: 20, speed: 1, move: false};

var ww = mydiv.offsetWidth;

var step = 0.5, begin1 = 0, begin2 = ww, raf;

aud.loop = false;

aud.onpause = aud.onplaying = () => moving();

aud.onseeked = () => cancelAnimationFrame(raf);

aud.onended = () => { cancelAnimationFrame(raf); aud.play(); };

play.onclick = () => { aud.paused ? aud.play() : aud.pause(); };

var moving = () => {

begin1 -= step;

begin2 -= step;

if(begin1 <= -ww) begin1 = ww;

if(begin2 <= -ww) begin2 = ww;

var b2 = begin2 + (begin1 >= 0 ? 1 : -1);

mydiv.style.setProperty('--begin1', begin1 + 'px');

mydiv.style.setProperty('--begin2', b2 + 'px');

aud.paused

? (cancelAnimationFrame(raf), mydiv.style.setProperty('--state', 'paused'), vid.pause())

: (raf = requestAnimationFrame(moving), mydiv.style.setProperty('--state', 'running'),vid.play());

lz.move = !aud.paused;

};

</script>

马黑黑 · 发表于 2024-4-16 08:12

本帖最后由马黑黑于 2024-4-16 08:17 编辑

浏览过《凤山舞曲》的朋友请 Ctrl + F5 硬刷新一下帖子，因为 ball-lz.js 资源有更新，更新内容是全页渲染粒子效果时令粒子仅在最大化浏览器状态下的视口范围内呈现。如果硬刷新后还没能看到这样的效果，请再点击刷新按钮一次。

本帖主要测试：

① 小球粒子以全页背景渲染其运行效果；
② 小球粒子与其他特效配合运行（本帖以背景移动效果作为尝试）。

这里面会涉及到元素之间的层级关系问题，需要确保粒子所依托的canvas画布元素可见但不可屏蔽页面上的其他元素的交互操作，为此，在CSS中设置了 canvas 的样式（代码第8行），一是提升其 z-index 值，二是令其不可点击（这将牺牲小球点击效果，这也是无奈的选择）。为安全起见（不过这是多余的），帖子其他重要元素如按钮等，设置高于 canvas 画布的 z-index 值（参考代码第六行）。

【小技巧】

小球粒子的运行开关是 lz.move 变量，这是一个非真即假的布尔变量，为真时小球运行，为假时小球暂停。当小球粒子封装用于配套其它特效时，我们仅需在关键处操作 lz.move 值即可，具体请参考代码第 47 行，它放在背景移动的函数 moving() 里。之所以放在 moving() 函数中，是因为背景移动特效通过此函数达成音频与动画联动运行的目的，所以将 lz.move 捆绑在这里最为合适，无需专门编写监听函数。