Question

我想创建一个包含3列的界面，每个列都有混合内容（文本，图像和视频），并希望它们同时以不同的速度垂直滚动。是否有一种相对简单的方法来实现html，css和/或javascript？

PS。我知道视差滚动，但我遇到的实现似乎主要是关于使用图像作为背景来创建一个维度错觉。

Answer 1

$.fn.makeScroll = function(speed) {
    var elem = this,
        i = 0;

    setInterval(function() {
        elem.scrollTop(i++); // increment scroll top
    }, speed); // run every 'speed' ms (so lower is faster)
};

您可以启用它：

$('div:eq(0)').makeScroll(75); // moderate speed

Answer 2

您想实际滚动内容吗？

$('.column').animate({
    scrollTop: $('.column').height() - $(window).height()
}, 1000);

这将在1秒内向下滚动您的列。调整每列的速度。

修改

我假设您的列是窗口的高度。如果没有，则必须调整scrollTop。

Answer 3

我认为一个简单的解决方法是使用以下属性创建3个div元素：

溢出：隐藏; 宽度：x px（固定宽度）高度：x px（固定高度）顶部：0px; left：x px;

然后你必须捕获onscroll事件并设置top-Attribute。

E.g。

div1：top：-100px

div2：top：-300px

div3：top：-500px

我希望我的描述清楚.. :) 这应该工作

垂直滚动列具有不同的速度

3 个答案: