Question

我要无限滚动“背景图片”动画。如何设置它只是连续向上而不是向下？仍然，这是一个混蛋。怎么可能？请帮助任何人。

我有一个链接： http://herinshah.com/wp/fortiflex/5-2/

CSS：

const images = document.querySelectorAll('.product-section-images img');  

images.forEach((img) => img.addEventListener('click', thumbnailClick));

function thumbnailClick(e) {
    currentImage.src = this.src; 
    currentImage.classList.remove('active');

    currentImage.addEventListener('transitionend', function() {
        currentImage.src = this.querySelector('img').src;
        currentImage.classList.add('active');
    })

    images.forEach((element) => element.classList.remove('selected'));
    this.classList.add('selected');
}

Answer 1

我被迫回答这个问题是因为我做了类似的事情：在（双关语意）之前，而您跳过的动画给我带来了癌症。

您将需要弄乱伪装的：after元素并获得正确的高度。这应该可以帮助您入门。

另外，您的图像裁剪得还不太理想，因此，请修复此问题，您会很方便。

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>Test</title>
  </head>
  <body onload="onloaded()">
    <div class="foo_section">
      <div class="foo_container">
        <img class="foo_image" src="http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png" />
      </div> 
    </div>
  </body>
</html>

.foo_section {
  width: 100vw;
  height: 100vh;
  position: fixed;
  min-height: 400px;
}

.foo_container {
  width: 100%;
  position: relative;
  animation: infiniteScrollBg 10s infinite linear;
}

.foo_container:after {
  content: "";
  height: 500%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #f6eb00;
  background-image: url('http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png');
  background-size: 100% 20%;
}

.foo_image {
  width: 100%;
}

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

Codepen

我看到您也在使用优雅主题。 <3 Divi builder

Answer 2

您需要将div包裹在div中。这是相同的工作fiddle
HTML

<div class="main">
    <div class="holder"></div>
</div>

CSS

     *{
      margin:0;
      padding:0
    }

    .main {
      height: 100vh;
      overflow: hidden;
    }

    .holder {
      height: 200vh;
      -webkit-animation: upwards 2.5s linear infinite;
      animation: upward 2.5s linear infinite;
      background: url(http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png)  center yellow;
      background-size: 100% 50%;
    }

    @-webkit-keyframes upward {
     from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
     }
    }

    @keyframes upward {
      from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
     }
    }

Answer 3

我建议您有两个div和相同的background标签。然后，对相同的div进行动画处理，并divs的位置进行播放并进行动画处理，使其看起来不断向上滚动。

.container{
  width:600px;
  height:400px;
  background-color:yellow;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}
.bg{
  width:100%;
  height:400px;
  background-repeat:no-repeat;
  background-size:contain;
  position:absolute;
  bottom:0;
}
.bg.bg1{
  transform: translate(0,0);
   animation: upward 3s linear infinite;
}
.bg.bg2{
  transform: translate(0,100%);
  animation: upward2 3s linear infinite;
}

@keyframes upward {
    to {
         transform: translate(0,-100%);
    }
    from {
       transform: translate(0, 0);
    }
}
@keyframes upward2 {
    to {
      transform: translate(0,0);
    }
    from {
      transform: translate(0,100%);
    }
}

这就是我要做的。 my codepen。

动画无限滚动背景图片

3 个答案: