Vertical Inverse scrolling and Horizontal scrolling

Question

I have visited the site. There you can see horizontal scrolling and in level 4, you can see the Inverse vertical scrolling. How can I achieve this. Just by using css3 or using some other resources like JS.

Thanks in advance.

Answer 1

Using Jquery you could do something like:

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   });

});

Demo and tutorial

or

window.onscroll=function() {
    var scroll = window.scrollY;
    $('article').css('left', '-' + scroll + 'px');
}

make sure that the css fits

section {
    overflow:hidden;
    height:1024px;
}
article {
    width:1024px;/*same as section's height*/
    position:fixed; /*you need this to fixe the V-scroll*/
}
article p {
    float:left;
}

Html

<section>
    <article>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>

    </article>
</section>