Question

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

这是demo。

我尝试过的解决方案是使用一个包含100vh和100vw视口的包装元素，然后将2 div放入其中，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

问题在于宽高比。您将宽高比设置为视图窗口，而不是图像大小。因此，您的图像最终会在视窗窗口处被截断。

我通过将.animated-scene__frame更改为此来在您的codepen中工作：

 .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 2

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

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

我设置了2个不同宽高比的不同容器，以便更轻松地在不同的屏幕上查看结果

＆＃13;

.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%);}

}

＆＃13;

<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>

＆＃13;

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

请注意，当图像的宽高比和窗口都未知时，需要使用background-size：cover。由于您知道图像的纵横比，因此可以使用基于它的媒体查询来控制显示。

现在，当需要时，图像将不会适应容器的宽度，而是适应它的高度

＆＃13;

@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%);}

}

＆＃13;

<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>

＆＃13;

Answer 3

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

为什么会问？

样式将由浏览器无缝拼接
更干净的HTML代码。我们只需要一个元素即可做到这一点。

执行此方法的唯一const是您需要知道所使用图像的尺寸。

示例：

/*
  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 4

我建议只需将图片扩展3次，即：

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

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

Answer 5

您必须使用 background-position 属性。这里有一个固定的例子http://codepen.io/azamat7g/pen/BRwRVV

完整代码：

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

全屏无限滚动背景

5 个答案: