江上清风游

马黑黑 发表于 2026-8-3 20:01

马黑黑 发表于 2026-8-3 20:01

帖子代码：

<style>
@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; color: yellow; }
.pa::before, .pa::after { position: absolute; content: ''; inset: 0; background: url('https://638183.freep.cn/638183/t24/7/t24.jpg') no-repeat center/cover; z-index: -2; }
.pa::before { background-position: var(--begin1) 0; }
.pa::after {
   transform: scale(-1, 1);
   background-position: var(--begin2) 0;
}
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
#mpic { width: 160px; bottom: 50px; }
</style>

<div id="pa" class="pa">
<img id="mpic" class="rot" src="https://638183.freep.cn/638183/web/svg1/s002.svg" alt="" />
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/02/04/5b5085d637d83.mp4" autoplay loop muted></video>
</div>

<script>
var raf = null, begin1 = 0, begin2 = 0, speed = 0.35;

var options = {
   pa: '.pa',
   urls: [['https://music.163.com/song/media/outer/url?id=32743519', '江上清风游']],
   btns: ,
};

loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

function tzRun() {
   var aud = new AudPlayer(options);

   function bgMove() {
         var ww = aud.pa.offsetWidth;
         function moving() {
            cancelAnimationFrame(raf);
            begin1 += speed;
            if (speed > 0) {
               if (begin1 >= ww) begin1 = -ww;
            } else {
               if(begin1 <= -ww) begin1 = ww;
            }
            begin2 = begin1 >= 0 ? -1 * (begin1 - ww + 1) : -1 * (begin1 + ww - 1);
            aud.pa.style.setProperty('--begin1', begin1 + 'px');
            aud.pa.style.setProperty('--begin2', begin2 + 'px');
            aud.aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(moving);
         }
         moving();
   }

   aud.aud.onpause = () => bgMove();
   aud.aud.onplaying = () => bgMove();
   window.onresize = () => bgMove();
}

function loadJs(url, callback) {
   var script = document.createElement('script');
   script.charset = 'utf-8';
   script.src = url;
   script.onload = function() {
         if (callback) callback();
   };
   document.head.appendChild(script);
}
</script>

马黑黑 发表于 2026-8-3 20:11

本帖测试：2024年设计的背景移动与当下帖子模块的融合

2024年上半年设计了一个单图背景移动的算法，主要实现原理是利用帖子容器的两个伪元素装载背景（其中一个水平反向装载）并按算法移动背景，此间，背景图片存在两个接头，接头无缝接上。接头必须紧凑，所以设计的时候，帖子容器是严格按图片尺寸制定宽高。

将其融合到新帖子模板，存在的问题是图片随着帖子容器的缩放会存在接头有缝现象，明显或不明显依据图片自身的特性，而视频会淡化缝隙。

当然，总体效果可能不可预测，一切视具体场景而定。

马黑黑 发表于 2026-8-3 20:15

关于背景移动方向：

全局变量 speed 为正数时，时本帖的方向，自左向右；将 speed 设为负数，背景图片将自右向左移动。

speed 不宜过快或过慢，并且，它会因为不同的显卡设备而影响实际移动速度。

马黑黑 发表于 2026-8-3 20:20

背景移动的几个全局变量依赖：

var raf = null, begin1 = 0, begin2 = 0, speed = 0.35;

raf : 请求关键帧动画的操作依据；
begin1、begin2 ：伪元素的背景移动依据；
speed ：背景移动速度。

使用全局变量可以有效减少代码量，且能避免使用闭包维护背景移动的相关数据。

梦江南 发表于 2026-8-3 21:04

黑黑老师晚上嚎！{:4_187:}

梦江南 发表于 2026-8-3 21:09

这图片移动太美了，这景色看着让人心旷神怡，音乐可以治愈心灵的烦躁。{:4_204:}

杨帆发表于 2026-8-3 23:38

代码简洁，融合自然，效果正常，测试成功，谢谢马老师精彩分享{:4_180:}

红影发表于 2026-8-4 13:54

这站图图在两侧的接头都那么严丝合缝，看着滚动图片那么自然。真漂亮的制作。
欣赏黑黑好帖{:4_199:}

马黑黑 发表于 2026-8-4 17:16

梦江南发表于 2026-8-3 21:04
黑黑老师晚上嚎！

你嚎你嚎

马黑黑 发表于 2026-8-4 17:17

梦江南发表于 2026-8-3 21:09
这图片移动太美了，这景色看着让人心旷神怡，音乐可以治愈心灵的烦躁。

古风轻音乐是非常治愈的

马黑黑 发表于 2026-8-4 17:18

杨帆发表于 2026-8-3 23:38
代码简洁，融合自然，效果正常，测试成功，谢谢马老师精彩分享

那个核心函数还可以再精简

马黑黑 发表于 2026-8-4 17:18

红影发表于 2026-8-4 13:54
这站图图在两侧的接头都那么严丝合缝，看着滚动图片那么自然。真漂亮的制作。
欣赏黑黑好帖

感谢领导支持

杨帆发表于 2026-8-4 18:24

马黑黑发表于 2026-8-4 17:18
那个核心函数还可以再精简

是吗？请问老师该如何精简呢{:4_190:}

马黑黑 发表于 2026-8-4 18:30

杨帆发表于 2026-8-4 18:24
是吗？请问老师该如何精简呢

我马上发出来

杨帆发表于 2026-8-4 18:33

马黑黑发表于 2026-8-4 18:30
我马上发出来

哇，这么快呀，谢谢大佬{:4_180:}

马黑黑 发表于 2026-8-4 18:41

杨帆发表于 2026-8-4 18:33
哇，这么快呀，谢谢大佬

{:4_190:}

霜染枫丹 发表于 2026-8-4 20:27

马老师晚上好！很喜欢这个形式，适合自己拍摄做成原创。我抱走了，谢谢您的分享，恭祝安好！{:4_204:}{:4_190:}

红影发表于 2026-8-4 22:47

马黑黑发表于 2026-8-4 17:18
感谢领导支持

你也领导，要不我再感谢回去呗{:4_173:}

宕.. 发表于 2026-8-4 22:59

哦哦，我知道了，这是那个背景循环效果，真奈斯~~

页: [1] 2

花潮论坛's Archiver

江上清风游