Prologue（背景自左向右滚动演示）

马黑黑 发表于 2024-4-6 18:32

马黑黑 发表于 2024-4-6 18:33

帖子代码
<style>
#mydiv {
margin: 20px 0 20px calc(50% - 721px);
width: 1280px;
height: 800px;
background: lightblue;
box-shadow: 4px 4px 8px #000;
overflow: hidden;
z-index: 1;
position: relative;
--begin1: 0px;
--begin2: -1280px;
}
#mydiv::before , #mydiv::after {
position: absolute;
content: '';
inset: 0;
background: url('https://638183.freep.cn/638183/t24/1/prologue.jpg') no-repeat;
z-index: -2;
}
#mydiv::before {
background-position: var(--begin1) 0;
}
#mydiv::after {
transform: scale(-1, 1);
background-position: var(--begin2) 0;
}
#play {
position: absolute;
left: calc(50% - 50px);
top: 20px;
width: 100px;
cursor: pointer;
animation: rotating 5s linear infinite var(--state);
}
#vid {
position: absolute;
right: 0;
width: 40%;
height: 30%;
object-fit: cover;
mix-blend-mode: screen;
transform: rotate(-15deg);
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=2923186" 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 ww = mydiv.offsetWidth;
var step = 0.5, begin1 = 0, raf = null;
aud.loo = false;
play.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.onpause = aud.onplaying = () => mState();
aud.onended = () => { aud.play(); cancelAnimationFrame(raf); }
aud.onseeked = () => cancelAnimationFrame(raf);
var moving = () => {
begin1 += step;
if(begin1 >= ww) begin1 = -ww;
begin2 = begin1 >= 0 ? -1 * (begin1 - ww + 1) : begin2 = -1 * (begin1 + ww - 1);
mydiv.style.setProperty('--begin1', begin1 + 'px');
mydiv.style.setProperty('--begin2', begin2 + 'px');
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(moving);
};
var mState = () => {
aud.paused
? (mydiv.style.setProperty('--state', 'paused'), cancelAnimationFrame(raf), vid.pause())
: (mydiv.style.setProperty('--state', 'running'), raf = requestAnimationFrame(moving), vid.play());
};
</script>

马黑黑 发表于 2024-4-6 18:38

本帖最后由马黑黑于 2024-4-6 19:01 编辑

11、12行：初始定位背景位置，以保证音频不能自动播放时背景依然完备；

57行：step 值依据需求而定，一般是 1，图片偏长时可以考虑 0.5；

58行：确保音频不循环播放，如果 audio 标签不设置 loop，此句可删；

64、65行：这是背景图片自左向右滚动的关键。

66行：背景图片衔接的关键算法，自左向右和自右向左通用。

南无月 发表于 2024-4-6 18:39

移动流畅，衔接完美。。
场面宏大气势，
这次还加了视频动态{:4_174:}更好看啦。。

马黑黑 发表于 2024-4-6 20:03

南无月发表于 2024-4-6 18:39
移动流畅，衔接完美。。
场面宏大气势，
这次还加了视频动态更好看啦。。

谢看

南无月 发表于 2024-4-6 20:22

马黑黑发表于 2024-4-6 18:38
11、12行：初始定位背景位置，以保证音频不能自动播放时背景依然完备；

57行：step 值依据需求而定，一 ...

{:4_187:}这个说明更加详细了。。

南无月 发表于 2024-4-6 20:23

马黑黑发表于 2024-4-6 20:03
谢看

好哒，那再看看{:4_170:}

马黑黑 发表于 2024-4-6 20:57

南无月发表于 2024-4-6 20:23
好哒，那再看看

{:4_191:}

马黑黑 发表于 2024-4-6 20:59

南无月发表于 2024-4-6 20:22
这个说明更加详细了。。

说说也好，其实大家也应该心中有数了

小辣椒 发表于 2024-4-6 21:03

这个和昨天的不一样的？我刚做了昨天的效果

红影发表于 2024-4-6 21:04

还可以向右滚动，真好，现在想往左右哪边都行了呢{:4_187:}

马黑黑 发表于 2024-4-6 21:06

红影发表于 2024-4-6 21:04
还可以向右滚动，真好，现在想往左右哪边都行了呢

上下滚动的我就不介绍了，需要的可以自行研究一下

红影发表于 2024-4-6 21:07

这个完全没有接缝，衔接十分自然，漂亮{:4_199:}

马黑黑 发表于 2024-4-6 21:09

红影发表于 2024-4-6 21:07
这个完全没有接缝，衔接十分自然，漂亮

这和图片也会有点关系。反馈中得知，有些图片左右或上下会留有半个或一个像素的边，这会影响衔接，需要处理图片。

马黑黑 发表于 2024-4-6 21:10

小辣椒发表于 2024-4-6 21:03
这个和昨天的不一样的？我刚做了昨天的效果

方向不同。你知道的，有左派，也有右派{:4_170:}

小辣椒 发表于 2024-4-6 21:13

马黑黑发表于 2024-4-6 18:38
11、12行：初始定位背景位置，以保证音频不能自动播放时背景依然完备；

57行：step 值依据需求而定，一 ...

仔细看看说明

马黑黑 发表于 2024-4-6 21:17

小辣椒发表于 2024-4-6 21:13
仔细看看说明

这个和你新发布的帖子不是同一个模板：你那个是前些时候的，移动的是伪元素；这个是昨天和今天研究的结果，移动的是伪元素的背景图片。

效果区别：计算机下没有任何区别；手机端，果机和部分安卓机会有一个像素问题，你用的模板目前无法处理，而昨天和今天的模板可以解决。

小辣椒 发表于 2024-4-6 21:50

马黑黑发表于 2024-4-6 21:10
方向不同。你知道的，有左派，也有右派

看明白了{:4_173:}

小辣椒 发表于 2024-4-6 21:51

马黑黑发表于 2024-4-6 21:17
这个和你新发布的帖子不是同一个模板：你那个是前些时候的，移动的是伪元素；这个是昨天和今天研究的结果 ...

哇塞~~~原来这样啊，那我做早了{:4_170:}

马黑黑 发表于 2024-4-6 23:10

小辣椒发表于 2024-4-6 21:51
哇塞~~~原来这样啊，那我做早了

也不早。那个也挺好的

页: [1] 2 3 4 5 6 7 8

花潮论坛's Archiver

Prologue（背景自左向右滚动演示）