Question

I saw this on another website, when you scroll down the page(vertically) it triggers an animation, where a circle rotates in place. How can I reverse this so the animation triggers when I scroll horizontally

$(document).ready(function() {

    $(window).scroll(function(e) {
        var top = $(document).scrollTop();
        var wHeight = Math.max(640,$(window).height());

        if (top < wHeight) {
            //$('.bg').css('top',70+top/2);
            $('.bg .maze').css({
                '-webkit-transform':'rotate('+top+'deg)',
                '-moz-transform':'rotate('+top+'deg)',
                '-o-transform':'rotate('+top+'deg)',
                '-ms-transform':'rotate('+top+'deg)',
                'transform':'rotate('+top+'deg)'
            });
        }
    });

});

Answer 1

You have to use jQuery::scrollLeft() instead of jQuery::scrollTop(), and compare it to the window width:

var left = $(document).scrollLeft();
var wWidth = Math.max(640,$(window).width());

if (left < wWidth) { /* ... */ }