CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Engin Erdogan
Engin Erdogan

Reputation: 631

Vertical scrolling columns with different speeds

I would like to create an interface with 3 columns, each having mixed content (text, image, and video), and would like to have them scroll vertically with different speeds at the same time. Is there a relatively simple way of accomplishing this with html, css, and/or javascript?

PS. I know about the parallax scrolling, but the implementations I came across seem to be mostly about using images as background to create a dimensional illusion.

Upvotes: 2

Views: 2531

Answers (3)

pimvdb
pimvdb

Reputation: 154828

Something like: http://jsfiddle.net/KVWuS/.

$.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)
};

You can enable it like:

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

Upvotes: 1

funcoder
funcoder

Reputation: 1975

I think a simple workaround would be to create 3 div Elements with the following Attributes:

overflow: hidden; width: x px (fixed width) height: x px (fixed height) top: 0px; left: x px;

Then you have to capture the onscroll event and set the top-Attribute.

E.g.

div1: top: -100px

div2: top: -300px

div3: top: -500px

I hope my description is clear.. :) That should work

Upvotes: 1

Joseph Silber
Joseph Silber

Reputation: 219940

You want to actually scroll the content?

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

This will scroll your column down in 1 second. Adjust the speed per column.

EDIT:

I was assuming your columns were the height of the window. If not, you'll have to adjust the scrollTop.

Upvotes: 1

Related Questions