全屏无限滚动背景 [英] Fullscreen infinite scrolling background

问题描述

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

这里是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>

这篇关于全屏无限滚动背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！