胜利 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2024-3-26 11:39

胜利

本帖最后由马黑黑于 2024-3-26 18:19 编辑 <br /><br /><style>
#papa { margin: -60px 0 0 calc(50% - 681px); width: 1200px; height: 553px; box-shadow: 2px 4px 8px #333; position: relative; overflow: hidden; z-index: 1; }
#canv { position: absolute; }
#mypic { position: absolute; left: 45%; top: 40px; width: 80px; cursor: pointer; transform: scale(0.8) skew(-10deg); mix-blend-mode: screen; animation: scale 2.5s infinite alternate var(--state); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; filter: opacity(.3); pointer-events: none; }
@keyframes scale { to { transform: scale(1.5) skew(10deg); } }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1930815942" autoplay loop></audio>
<canvas id="canv"></canvas>
<video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/68/5b4846127e497.mp4" loop muted></video>
<img id="mypic" src="https://638183.freep.cn/638183/small/2x.jpg" alt="" title="播放/暂停" />
</div>

<script>
(function() {
var w = canv.width = papa.offsetWidth, h = canv.height = papa.offsetHeight;
var raf = null, dx = 0, step = 1, iw = 1280;
var ctx = canv.getContext('2d');

var img = new Image();
img.src = 'https://638183.freep.cn/638183/t24/webp/2x.webp';
img.onload = () => mState();

function render() {
ctx.clearRect(0,0,w,h);
dx = (dx + step) % iw;
ctx.drawImage(img, dx, 0, w - dx, h, 0, 0, w - dx, h);
ctx.drawImage(img, w, 0, iw - w, h, w - dx, 0, iw - w, h);
ctx.drawImage(img, 0, 0, w + dx - iw, h, iw - dx, 0, w + dx - iw, h);
raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(render);
};

function mState() {
aud.paused ?
(papa.style.setProperty('--state', 'paused'), mypic.title = '点击播放', vid.pause()) :
(papa.style.setProperty('--state', 'running'), mypic.title = '点击暂停', vid.play());
render();
};

aud.onpause = aud.onplaying = () => mState();
aud.onseeking = () => raf = cancelAnimationFrame(raf);
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2024-3-26 11:39

帖子代码
<style>
#papa { margin: 0 0 0 calc(50% - 681px); width: 1200px; height: 553px; box-shadow: 2px 4px 8px #333; position: relative; overflow: hidden; z-index: 1; }
#canv { position: absolute; }
#mypic { position: absolute; left: 45%; top: 40px; width: 80px; cursor: pointer; transform: scale(0.8) skew(-10deg); mix-blend-mode: screen; animation: scale 2.5s infinite alternate var(--state); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; filter: opacity(.3); pointer-events: none; }
@keyframes scale { to { transform: scale(1.5) skew(10deg); } }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1930815942" autoplay loop></audio>
<canvas id="canv"></canvas>
<video id="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/68/5b4846127e497.mp4" loop muted></video>
<img id="mypic" src="https://638183.freep.cn/638183/small/2x.jpg" alt="" title="播放/暂停" />
</div>

<script>
(function() {
var w = canv.width = papa.offsetWidth, h = canv.height = papa.offsetHeight;
var raf = null, dx = 0, step = .5, iw = 1280;
var ctx = canv.getContext('2d');

var img = new Image();
img.src = 'https://638183.freep.cn/638183/t24/webp/2x.webp';
img.onload = () => mState();

function render() {
ctx.clearRect(0,0,w,h);
dx = (dx + step) % iw;
ctx.drawImage(img, dx, 0, w - dx, h, 0, 0, w - dx, h);
ctx.drawImage(img, w, 0, iw - w, h, w - dx, 0, iw - w, h);
ctx.drawImage(img, 0, 0, w + dx - iw, h, iw - dx, 0, w + dx - iw, h);
raf = aud.paused ? cancelAnimationFrame(raf) : requestAnimationFrame(render);
};

function mState() {
aud.paused ?
(papa.style.setProperty('--state', 'paused'), mypic.title = '点击播放', vid.pause()) :
(papa.style.setProperty('--state', 'running'), mypic.title = '点击暂停', vid.play());
render();
};

aud.onpause = aud.onplaying = () => mState();
aud.onseeking = () => raf = cancelAnimationFrame(raf);
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2024-3-26 11:46

不知道哪个变量和论坛的有冲突，需要将JS部分的代码用 function() { ... })(); 包裹起来。

这个版本，对图片的要求如下：图片的高度即为帖子的高度，图片宽度不论，可以大于帖子的宽度。图片为全景图，首尾无缝衔接（可以用工具加工，比如PS或专门的全景图加工工具）。

第 19 行代码中，step 变量是图片滑动步幅，根据图片长度设置，一般为 0.1 ~ 1 之间，具体如何确定视情况、个人需求而定；变量 iw 至关重要，它是图片的实际宽度，这个值我本来是自动获取的，前面发布《胜利》时失败两次，我以为是 iw 的问题，改为了手动赋值，注意不要px单位，纯纯的数字。

流水光阴 发表于 2024-3-26 14:27

天使自由飞翔

梦油发表于 2024-3-26 16:14

嗬！气势磅礴、气贯山河的大制作啊！{:5_116:}

马黑黑 发表于 2024-3-26 18:19

梦油发表于 2024-3-26 16:14
嗬！气势磅礴、气贯山河的大制作啊！

{:4_190:}

马黑黑 发表于 2024-3-26 18:19

流水光阴发表于 2024-3-26 14:27
天使自由飞翔

{:4_190:}

南无月 发表于 2024-3-26 18:22

天之涯的升级版来了。。。
可以逐渐滚动显示比画布宽得多的图片。。。
清明上河图这次可以完美装得下了。。{:4_170:}

马黑黑 发表于 2024-3-26 18:24

南无月发表于 2024-3-26 18:22
天之涯的升级版来了。。。
可以逐渐滚动显示比画布宽得多的图片。。。
清明上河图这次可以完美装得下了。 ...

火狐浏览器和手机浏览器，接头都有本个像素拉跨的问题。step 步幅改为整数可能就好了。

南无月 发表于 2024-3-26 18:24

天使从0.8到1.5加上角度变化，更象在天空飞翔。。

马黑黑 发表于 2024-3-26 18:26

南无月发表于 2024-3-26 18:24
天使从0.8到1.5加上角度变化，更象在天空飞翔。。

很奇妙吧

南无月 发表于 2024-3-26 20:33

马黑黑发表于 2024-3-26 18:24
火狐浏览器和手机浏览器，接头都有本个像素拉跨的问题。step 步幅改为整数可能就好了。

好哒。。。
已用2139的宽图去试了，画布1700宽度。。
现在完全没有任何接头缝隙。。
老师用神奇的代码又解决我一大问题。。{:4_170:}

南无月 发表于 2024-3-26 20:34

马黑黑发表于 2024-3-26 18:26
很奇妙吧

效果十分奇妙。。
关键是老师的构思和创意更奇妙呀。。{:4_199:}

小辣椒 发表于 2024-3-26 20:36

全景效果太美了{:4_199:}

马黑黑 发表于 2024-3-26 20:36

南无月发表于 2024-3-26 20:34
效果十分奇妙。。
关键是老师的构思和创意更奇妙呀。。

这些没啥，多喝酒就行

马黑黑 发表于 2024-3-26 20:36

小辣椒发表于 2024-3-26 20:36
全景效果太美了

{:4_190:}

南无月 发表于 2024-3-26 20:42

马黑黑发表于 2024-3-26 20:36
这些没啥，多喝酒就行

10DEG就是喝酒来的灵感

马黑黑 发表于 2024-3-26 20:42

南无月发表于 2024-3-26 20:42
10DEG就是喝酒来的灵感

大约吧，记不得了

南无月 发表于 2024-3-26 20:51

马黑黑发表于 2024-3-26 20:42
大约吧，记不得了

记性真好

红影发表于 2024-3-26 21:02

黑黑的最新改进版滚动图。{:4_199:}
背景图的选图很奇妙，小天使的动画设置也很美。

页: [1] 2 3 4

花潮论坛's Archiver

胜利