Как сделать зацикленный скролл изображения?

Question

Нужно сделать такой зацикленный скролл изображения внутри блока, который по высоте меньше изображения.

Делаю следующим образом, и у меня картинка скроллится вверх, потом вниз и останавливается. Что сделано неверно? Такое ощущение, что setInterval перестает работать после 2-- итераций.

function scrollImage(block, image) {
  var blockHeight = $(block).height();
  var imageHeight = $(image).height();
  var different = imageHeight - blockHeight;
  setInterval(function() {
    if ($(image).css("top") == "0px") {
      $(image).animate({
        top: -different
      }, 6000);
    } else {
      $(image).animate({
        top: "0px"
      }, 6000);
    }
  }, 1);
}

scrollImage(".js-block1", ".js-image1");

.block1 .image_block {
  height: 300px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  position: relative;
}

.block1 .image {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="image_block js-block1">
  <img class="image js-image1" src="//via.placeholder.com/150x600" alt="image">
</div>

Answer 1

Вот, например такой вариант с использованием .animate

let el = $('#infinity-scroll'), t = 3000;
    
function Scroll(dir = 0) {
  el.animate({
    scrollTop: dir === 0 ? el.prop('scrollHeight') - el.height() : 0
  }, t, function() {
    Scroll(dir === 0 ? 1 : 0);
  });
} Scroll(0);

#infinity-scroll {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 150px;
  overflow: hidden auto;
}

#infinity-scroll img {
  display: block;
  width: calc(100% / 3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="infinity-scroll">
  <img src="https://via.placeholder.com/300/f88/333">
  <img src="https://via.placeholder.com/300/8f8/333">
  <img src="https://via.placeholder.com/300/88f/333">
  
  <img src="https://via.placeholder.com/300/8f8/333">
  <img src="https://via.placeholder.com/300/88f/333">
  <img src="https://via.placeholder.com/300/f88/333">
  
  <img src="https://via.placeholder.com/300/88f/333">
  <img src="https://via.placeholder.com/300/f88/333">
  <img src="https://via.placeholder.com/300/8f8/333">
</div>

Вариант с одной картинкой и без JS

.img {
  display: block;
  width: 100%;
  height: 200px;
  background: url('//i.imgur.com/nkvcs4O.png') no-repeat top center / 100% auto;
  animation: Scroll 3s linear infinite alternate;
}

@keyframes Scroll {
  to {
    background-position: bottom center;
  }
}

<div class="img"></div>

БЛОГ НА HUSL

Как сделать зацикленный скролл изображения?

Ответы (1 шт):