Slipping images with AngularJS

Lately there are many effects added to websites related to user’s scroll down event. One of them consists on sliding elements across the page as if they were slipping up or down, Adidas did an awesome addition of such effect in their snowboarding section giving the effect that certain elements were slipping up and down only to return to their original place. I tried to copy part of that effect (without checking the scrolling speed) and this is what I got:

First, let’s add the listeners on our controller. One of these listeners is going to check for when does the scrolling happen and in which direction. By making use of Angular, we will add a flag the the scope to tell the element that we are scrolling in such direction:

// Set scrolling flags:
window.addEventListener("scroll", function () {
    var st = window.pageYOffset || document.documentElement.scrollTop;
    if (st > lastScrollTop) {
        me.scrollingUp = false;
        me.scrollingDown = true;
    } else {
        me.scrollingUp = true;
        me.scrollingDown = false;
    }
    lastScrollTop = st;
}, false);

// Switch off when scrolling stops
$(window).scroll(_.debounce(function () {
    me.scrollingUp = false;
    me.scrollingDown = false;
    $scope.$apply();
}, 150));

Note: I’m using underscore for the “scrolling stopped” listener.

Now, we only need to attach those flags to their styles:

        <section id="slippingImage">
            <img ng-class="{'scrollingUp': insightsCtrl.scrollingUp, 'scrollingDown': insightsCtrl.scrollingDown}"
                 src="http://images.celebrityintelligence.com/CI2/images/marketing/CI_assets_insights2_normal.png"/>
        </section>

And the styles using LESS:

    #slippingImage{
        position:relative;
        height: 658px;

        > img{
            position:absolute;
            top: 0px;
            transition: top 0.5s ease-out;

            &.scrollingUp{
                top: -20px;
            }
            &.scrollingDown{
                top: 20px;
            }
        }
    }