Изображения бесконечно зацикливаются на свитке - PullRequest
Новая
       11

Изображения бесконечно зацикливаются на свитке

0 голосов
/ 08 сентября 2018

Я пытаюсь добиться эффекта, при котором каждое изображение перемещается вверх при прокрутке, каждое изображение движется с разной скоростью, выходит за пределы экрана вверху и вновь появляется из нижней части страницы в бесконечном цикле. Диаграмма ниже

Любые примеры или предложения будут высоко оценены, спасибо

enter image description here

РЕДАКТИРОВАТЬ: https://codepen.io/JTParrett/pen/BkDie

Это прекрасный пример, однако я хочу, чтобы свиток был бесконечным, а объекты появлялись снизу 

$.fn.moveIt = function(){
var $window = $(window);
var instances = [];

$(this).each(function(){
instances.push(new moveItItem($(this)));
});

window.addEventListener('scroll', function(){
var scrollTop = $window.scrollTop();
instances.forEach(function(inst){
  inst.update(scrollTop);
});
}, {passive: true});
}

var moveItItem = function(el){
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};

moveItItem.prototype.update = function(scrollTop){
this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 
'px)');
};

// Initialization
$(function(){
$('[data-scroll-speed]').moveIt();
});

Ответы [ 2 ]

0 голосов
/ 08 сентября 2018

Вы можете использовать чистое CSS-решение для создания желаемого эффекта, который можно создать с помощью CSS-анимации . В приведенном ниже примере все элементы находятся в сетке, и каждый элемент имеет разное время выполнения для одной и той же анимации gotop. 

div {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-column-gap: 5%;
  grid-template-columns: auto auto auto auto;
  overflow: hidden;
}

div.inner-container::-webkit-scrollbar {
  display: none;
}

.A {
  height: auto;
  animation-name: gotop;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.B {
  height: auto;
  animation-name: gotop;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.C {
  height: auto;
  animation-name: gotop;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.D {
  height: auto;
  animation-name: gotop;
  animation-duration: 9s;
  animation-iteration-count: infinite;
}

@keyframes gotop {
  from {
    margin-top: 120%;
  }
  to {
    margin-top: -20%;
  }
}
<div>
  <p class="A">
    textA
  </p>
  <p class="B">
    textB
  </p>
  <p class="C">
    textC
  </p>
  <p class="D">
    textD
  </p>
</div>
0 голосов
/ 08 сентября 2018

Для начала, вы должны иметь абсолютное позиционирование на ваших изображениях. 

<img src="..." style="position: absolute; left: XXXpx: top: YYYpx;" data-scrollamount="ZZZ" />
<img src="..." style="position: absolute; left: XXXpx: top: YYYpx;" data-scrollamount="ZZZ" />
<img src="..." style="position: absolute; left: XXXpx: top: YYYpx;" data-scrollamount="ZZZ" />
<img src="..." style="position: absolute; left: XXXpx: top: YYYpx;" data-scrollamount="ZZZ" />
.
.
.
.

Таким образом, вы можете настроить начальную позицию каждого изображения. Размер прокрутки также будет разным для каждого изображения. Затем вы добавляете прослушиватель событий для события прокрутки окна. Вот некоторый код: 

window.addEventListener("scroll", function(){
    images.each(function(){
        this.style.top += this.dataset.scrollamount
    }
}
...