森林 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

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

森林

本帖最后由马黑黑于 2024-4-16 07:52 编辑 <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 id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=495562302" autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/19/81/5f154503b457d.mp4" muted loop></video>
<img id="play" src="https://638183.freep.cn/638183/small/4yc.png" alt="" />
</div>

<script>
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 07:54

马黑黑 发表于 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 捆绑在这里最为合适，无需专门编写监听函数。

愤怒的葡萄 发表于 2024-4-16 08:14

马版的主题帖就是不一般啊。

马黑黑 发表于 2024-4-16 08:15

愤怒的葡萄发表于 2024-4-16 08:14
马版的主题帖就是不一般啊。

早上好

亚伦影音工作室 发表于 2024-4-16 08:16

把网页都改变了好厉害！

马黑黑 发表于 2024-4-16 08:17

亚伦影音工作室发表于 2024-4-16 08:16
把网页都改变了好厉害！

粒子有点霸道{:4_170:}

愤怒的葡萄 发表于 2024-4-16 08:20

马黑黑发表于 2024-4-16 08:15
早上好

马版也早上好！~~~

愤怒的葡萄 发表于 2024-4-16 08:20

马黑黑发表于 2024-4-16 08:17
粒子有点霸道

满屏都是粒子啊，看的我有点眼花啊。

愤怒的葡萄 发表于 2024-4-16 08:28

亚伦影音工作室发表于 2024-4-16 08:16
把网页都改变了好厉害！
还能在网页上改变啊，真是什么事情都有啊。

亚伦影音工作室 发表于 2024-4-16 08:31

愤怒的葡萄发表于 2024-4-16 08:28
还能在网页上改变啊，真是什么事情都有啊。

老师的代码威武，只有想不到的，没有做不到的！

愤怒的葡萄 发表于 2024-4-16 08:34

亚伦影音工作室发表于 2024-4-16 08:31
老师的代码威武，只有想不到的，没有做不到的！

葡萄没玩过什么代码，来花潮论坛是来观摩学习的。

上海朝阳 发表于 2024-4-16 08:43

满天彩球，美美的

小文发表于 2024-4-16 09:05

壮美的大好{:4_191:}山河

马黑黑 发表于 2024-4-16 10:30

小文发表于 2024-4-16 09:05
壮美的大好山河

上午好

马黑黑 发表于 2024-4-16 10:30

上海朝阳发表于 2024-4-16 08:43
满天彩球，美美的

上午好啊

马黑黑 发表于 2024-4-16 10:31

愤怒的葡萄发表于 2024-4-16 08:20
满屏都是粒子啊，看的我有点眼花啊。

小球多了一些，控制在 60 上下可能比较合适

绿叶清舟 发表于 2024-4-16 10:59

这是越狱了啊

马黑黑 发表于 2024-4-16 11:48

绿叶清舟发表于 2024-4-16 10:59
这是越狱了啊

没有，放风

红影发表于 2024-4-16 15:47

粒子满天飞。想看看翻页后是否还有，这个楼正好20楼，哈哈，回复好就能看到了。{:4_173:}

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

森林