全屏无限滚动背景

Question

我正在尝试实现全屏无限滚动背景效果，它必须延伸到视口的整个高度和宽度。

\n\n

这是演示。

\n\n

我尝试过的解决方案是采用一个具有100vh和100vw视口的包装元素，然后div在其中放置 2 s，其高度为 100%，具有相同的背景图像和background-size: cover属性。我使用的图像的大小是：1,920px \xc3\x97 808px。

\n\n

然后我在包装元素上应用了以下动画：

\n\n

@keyframes infiniteScrollBg {\n  0% {\n    transform: translateY(0%);\n  }\n  100%{\n    transform: translateY(-100%);\n  }\n}\n

\n\n

但问题是，在某些视口尺寸上，图像无法正确重复（由于background-size: cover属性）：

\n\n

。

\n\n

这是我尝试过的完整代码：

\n\n

<div class="animated-scene">\n    <div class="animated-scene__frame animated-scene__frame-1"></div>\n    <div class="animated-scene__frame animated-scene__frame-2"></div>\n</div>\n

\n\n

和CSS：

\n\n

.animated-scene {\n    width: 100vw;\n    height: 100vh;\n    position: fixed;\n    min-height: 400px;\n    animation: infiniteScrollBg 50s linear infinite;\n }\n\n .animated-scene__frame {\n     width: 100%;\n     height: 100%;\n     background-size: cover;\n     background-color: #4277a3;\n     background-image: url(\'https://andreivictor.ro/codepen/fullscreen-infinite-scroll-bg/fullscreen-bg\');\n}\n

\n\n

您知道如何实现这种效果吗？

\n\n

感谢您的帮助。

\n

Answer 1

对于滚动背景，我使用了背景位置而不是使用附加元素，并使用变换 CSS 属性对其进行动画处理。

为什么你可能会问？

1. 图案将由浏览器无缝拼接
2. 更干净的 HTML 代码。我们只需要一个元素来做到这一点。

执行此方法的唯一缺点是您需要知道正在使用的图像的尺寸。

例子 ：

/*
  specify the scroll x (or y) with the width (or height) of the images
  In this case, the image dimension is :
  width: 1920px;
  height: 808px;
*/

@keyframes bgScroll {
  0% {
    background-position : 0px 0px
  }
  100% {
    background-position : 0px -808px
  }
}

.scrollingBG {
  display:block;
  width:100vw;
  height:100vh;
  background-image:url("https://andreivictor.ro/codepen/fullscreen-infinite-scroll-bg/fullscreen-bg.jpg");
  animation: bgScroll 20s linear infinite;
}

<div class='scrollingBG'></div>

Answer 2

我使用图像元素只是为了使用它的自动高度。

然后我在伪对象上使用背景，它能够根据需要多次重复自身

我设置了 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>