江上清风游

马黑黑

马黑黑

帖子代码：

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; color: yellow; }
   
4.     .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; }
   
5.     .pa::before { background-position: var(--begin1) 0; }
   
6.     .pa::after {
   
7.         transform: scale(-1, 1);
   
8.         background-position: var(--begin2) 0;
   
9.     }
   
10.     .player { width: 480px; bottom: 10px; }
    
11.     .btnFs { top: 25px; right: 20px; }
    
12.     #mpic { width: 160px; bottom: 50px; }
    
13. </style>
    
14. 
    
15. <div id="pa" class="pa">
    
16.     <img id="mpic" class="rot" src="https://638183.freep.cn/638183/web/svg1/s002.svg" alt="" />
    
17.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/02/04/5b5085d637d83.mp4" autoplay loop muted></video>
    
18. </div>
    
19. 
    
20. <script>
    
21.     var raf = null, begin1 = 0, begin2 = 0, speed = 0.35;
    
22.    
    
23.     var options = {
    
24.         pa: '.pa',
    
25.         urls: [['https://music.163.com/song/media/outer/url?id=32743519', '江上清风游']],
    
26.         btns: [mpic],
    
27.     };
    
28. 
    
29.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
    
30. 
    
31.     function tzRun() {
    
32.         var aud = new AudPlayer(options);
    
33.         
    
34.         function bgMove() {
    
35.             var ww = aud.pa.offsetWidth;
    
36.             function moving() {
    
37.                 cancelAnimationFrame(raf);
    
38.                 begin1 += speed;
    
39.                 if (speed > 0) {
    
40.                     if (begin1 >= ww) begin1 = -ww;
    
41.                 } else {
    
42.                     if(begin1 <= -ww) begin1 = ww;
    
43.                 }
    
44.                 begin2 = begin1 >= 0 ? -1 * (begin1 - ww + 1) : -1 * (begin1 + ww - 1);
    
45.                 aud.pa.style.setProperty('--begin1', begin1 + 'px');
    
46.                 aud.pa.style.setProperty('--begin2', begin2 + 'px');
    
47.                 aud.aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(moving);
    
48.             }
    
49.             moving();
    
50.         }
    
51.         
    
52.         aud.aud.onpause = () => bgMove();
    
53.         aud.aud.onplaying = () => bgMove();
    
54.         window.onresize = () => bgMove();
    
55.     }
    
56. 
    
57.     function loadJs(url, callback) {
    
58.         var script = document.createElement('script');
    
59.         script.charset = 'utf-8';
    
60.         script.src = url;
    
61.         script.onload = function() {
    
62.             if (callback) callback();
    
63.         };
    
64.         document.head.appendChild(script);
    
65.     }
    
66. </script>

复制代码

马黑黑

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

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

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

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

马黑黑

关于背景移动方向：

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

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

马黑黑

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

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

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

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

梦江南

黑黑老师晚上嚎！

梦江南

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