全屏无限滚动背景

Question

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

这是 demo。

我尝试过的解决方案是采用具有 100vh 和 100vw 视口的包装器元素，然后在其中放置 2 divs，其 100%高度，具有相同的背景图像和 background-size: cover 属性。我使用的图像大小是：1,920px × 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');
}

你知道我该如何实现这个效果吗？

感谢您的帮助。

Answer 1

我建议只将图片扩展 3 倍，其中：

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

使用一些图像编辑器创建一个具有相同图案的大图像，看看我制作的这个网站site，在那里你会发现一些无限的背景图案

Answer 2

问题与纵横比有关。您将纵横比设置为视图 window，而不是图像大小。因此，您的图像最终会在视图 window 方面被切断。

我通过将 .animated-scene__frame 更改为以下内容来绕过您的代码笔：

 .animated-scene__frame {
    width: 100%;
    height:200vh; //easy way - increase height in animated div to prevent image cutoff. Ideally should be done through javascript using like a 3x multiple of the height of the image. Then just rely on background-repeat during the animation :)
    background-size:contain;
    background-color: #4277a3;
    background-image: url('https://andreivictor.ro/codepen/fullscreen-infinite-scroll-bg/fullscreen-bg-slide1.jpg');
 }

Answer 3

您必须使用背景位置 属性。这是固定示例 http://codepen.io/azamat7g/pen/BRwRVV

完整代码：

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

.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-position: bottom left;
  background-color: #4277a3;
  background-image: url('https://andreivictor.ro/codepen/fullscreen-infinite-scroll-bg/fullscreen-bg-slide1.jpg');
}

.bottom{
  background-position: top left;
}

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

Answer 4

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

然后我在伪装上使用背景，它可以根据需要重复自己多次

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

更好的媒体查询解决方案，用于改变图像的使用方式。

请注意，当图像的宽高比和 window 都未知时，需要使用 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>

Answer 5

对于滚动背景，我使用 background-position 而不是使用其他元素，并使用变换 css 属性对其进行动画处理。

为什么你会问？

模式将由浏览器无缝拼接
更干净的 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>

全屏无限滚动背景

Fullscreen infinite scrolling background

css

css-animations

translate-animation

background-size