一齐上调div

Question

如何使图像彼此滑动？就像它们在Y端的位置粘在一起）。

例如，图像X从Y1向上滑动到Y2 同时图像Z从Y0滑到Y1

这就像一部电影，一起移动。

这是我一直在使用的代码-将div从Y = 300px滑动到Y = 0，然后将其他div从Y = 300滑动到Y = 0，但是向上滑动会留下正确的背景。

首选使用准系统jquery和CSS。

var slides = this.$el.find('.slide');
slides.each(function (i, o) {
    $(o).css('display', 'none');
}.bind(this));

var oldIndex = this.slideIndex;
this.slideIndex++;
if ( this.slideIndex > slides.length) {
    this.slideIndex = 1;
}

if (slides) {
    slides.eq(this.slideIndex - 1).css('display', 'block');
    slides.eq(oldIndex).css('display', 'block');

    if (this.slideInterval) {
        clearInterval(this.slideInterval);
    }
    this.slideInterval = setTimeout(this.runSlides.bind(this), 3000);
}

Answer 1

您可以在滚动库上使用动画。

https://michalsnik.github.io/aos/

您可以在此处按所需间隔设置延迟。好在它可以在视口上工作。