本文介绍了全屏无限滚动背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试实现全屏无限滚动背景效果，该效果必须延伸到视口的整个高度和宽度。
这里是demo。
我尝试过的解决方案是获取一个具有视口的100vh和100vw的包装元素，然后在其中放置2个高度为100%的，它们具有相同的背景图像和background-size: cover属性。我使用的图片大小为：1920px×808px。
然后我在包装器元素上应用了以下动画：
@keyframes infiniteScrollBg {
0% {
transform: translateY(0%);
}
100%{
transform: translateY(-100%);
}
}
但问题是在某些视口大小上，图像没有正确重复(由于background-size: cover属性)：
。
以下是我尝试过的完整代码：
<div class="animated-scene">
<div class="animated-scene__frame animated-scene__frame-1"></div>
<div class="animated-scene__frame animated-scene__frame-2"></div>
</div>
和CSS：
.animated-scene {
width: 100vw;
height: 100vh;
position: fixed;
min-height: 400px;
animation: infiniteScrollBg 50s linear infinite;
}
.animated-scene__frame {
width: 100%;
height: 100%;
background-size: cover;
background-color: #4277a3;
background-image: url('https://andreivictor.ro/codepen/fullscreen-infinite-scroll-bg/fullscreen-bg');
}
您知道如何实现此效果吗？
感谢您的帮助。
推荐答案
我使用图像元素只是为了使用它的自动高度。
然后，我在伪码上使用背景音，使其能够根据需要重复自身任意多次
我设置了2个不同长宽比的容器，以便更容易地在不同屏幕上查看结果
.container {
border: solid 1px black;
overflow: hidden;
position: absolute;
}
#ctn1 {
width: 300px;
height: 150px;
}
#ctn2 {
width: 200px;
height: 350px;
left: 320px;
}
.inner {
width: 100%;
position: relative;
animation: scroll 5s infinite linear;
}
.inner:after {
content: "";
height: 500%;
width: 100%;
position: absolute;
background-image: url(https://i.stack.imgur.com/FlK9o.jpg);
background-size: 100% 20%;
}
.img {
width: 100%;
}
@keyframes scroll {
from {transform: translateY(-100%);}
to {transform: translateY(-200%);}
}<div class="container" id="ctn1">
<div class="inner">
<img class="img" src="https://i.stack.imgur.com/FlK9o.jpg">
</div>
</div>
<div class="container" id="ctn2">
<div class="inner">
<img class="img" src="https://i.stack.imgur.com/FlK9o.jpg">
</div>
</div>用于更改图像使用方式的更好的媒体查询解决方案。
请注意，当图像和窗口的纵横比都未知时，需要使用Background-Size：Cover。由于您知道图像的纵横比，因此可以根据它使用媒体查询来控制显示。
现在，当需要时，图像将不再适应容器的宽度，而是适应容器的高度
@media screen and (max-aspect-ratio: 4/3) {
.inner {
height: 100%;
width: auto !important;
}
.img {
height: 100%;
width: auto !important;
}
}
.container {
border: solid 1px black;
display: inline-block;
overflow: hidden;
}
#ctn1 {
width: 300px;
height: 150px;
}
#ctn2 {
width: 200px;
height: 350px;
}
.inner {
width: 100%;
position: relative;
animation: scroll 5s infinite linear;
display: inline-block;
}
.inner:after {
content: "";
height: 500%;
width: 100%;
left: 0px;
position: absolute;
background-image: url(https://i.stack.imgur.com/FlK9o.jpg);
background-size: 100% 20%;
}
.img {
width: 100%;
}
@keyframes scroll {
from {transform: translateY(-100%);}
to {transform: translateY(-200%);}
}<div class="container" id="ctn1">
<div class="inner">
<img class="img" src="https://i.stack.imgur.com/FlK9o.jpg">
</div>
</div>
<div class="container" id="ctn2">
<div class="inner">
<img class="img" src="https://i.stack.imgur.com/FlK9o.jpg">
</div>
</div>这篇关于全屏无限滚动背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！