创建无限滚动垂直背景答案

【问题标题】：Creating an Infinite Scrolling VERTICAL background创建无限滚动垂直背景
【发布时间】：2022-12-24 07:29:10
【问题描述】：

有大量的水平滚动背景，但这不是我的问题。每当我使用关键帧创建垂直滚动时，背景图像本身就会用完，或者它会完全出现故障并重新开始滚动效果。那不是我需要的。我需要一个占据整个屏幕宽度的无缝垂直滚动背景。将有一个隐藏溢出的容器，它的背景需要缓慢向上滚动，并带有一系列永远不会出现故障、用完等的图像。它需要看起来像一百万个水平滚动示例，但垂直滚动。

在 CSS 中是我正在使用的图像的实际尺寸。我正在使用一个占位符来开始这个对话。请注意，即使有占位符，图像最终也会停止。

为什么它在垂直滚动时这样做，而在水平滚动时通常不这样做？不管你信不信，这对我来说没有意义，而且关于背景图像的垂直无限滚动的资源并不多。

如果有人有任何建议，我会采纳。 JS 或 CSS，无论它是什么，我都愿意倾听和学习，并理解为什么他妈的我搞不明白。谢谢。

<div class="container">
    <div class="sliding-background"></div>
</div>

.container {
    overflow: hidden;
    height: 600px;
  }
  
.sliding-background {
    background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
    height: 4980px;
    width: 1440px;
    animation: slide 30s linear infinite;
  }
  
  @keyframes slide{
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(0, -100%, 0);
    }
  }

    <div class="container">
        <div class="sliding-background"></div>
      </div>

【问题讨论】：

你在不同的浏览器中测试过 Cody 吗？
哦实际上 nvm 我想我有一个解决方案
好的，所以我的第一次尝试没有成功，诀窍是知道背景图像的高度，如果它是它自己的元素，这将是微不足道的

标签： css scroll background infinite

【解决方案1】：

如果您知道图像的确切高度，则此解决方案应该有效：

body {
  margin: 0;
}

.container {
  overflow: hidden;
  height: 600px;
}

.sliding-background {
  --imageHeight: 900px;
  background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
  height: calc(var(--imageHeight) * 2);
  animation: slide 4s linear infinite;
}

@keyframes slide { 
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(calc(var(--imageHeight) * -1));
  }
}

<div class="container">
  <div class="sliding-background"></div>
</div>

【讨论】：

扎克，非常感谢你。这也将成为未来人们的重要资源。我应用了你所做的，并为我的图像稍微改变了它，它起作用了！没有重启或“故障”。很奇怪，垂直滚动的资源不多，但很高兴我伸出了手。这个社区摇滚，你摇滚！非常感谢你
它在 1190x30600 图像上效果很好。该图像由漫画书 cbr 文件的页面组成。页面加入了 Python 和 Numpy。我用 ffmpeg 捕获了滚动并将其制作成电影。非常感谢

【解决方案2】：

body {
    margin: 0;
}

.container {
     overflow: hidden;
     height: 600px;
}

.sliding-background {
    background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
    -webkit-animation: bgScroll 600s linear infinite;
    animation: bgScroll 600s linear infinite;
    height: 100%;
    background-size: cover;
    position: relative;
}

@keyframes bgScroll{  
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 10000%;
    }
}

<div class="container">
    <div class="sliding-background"></div>
</div>

【讨论】：