Scroller Effects

by secretgspot

HTML

<small>(Go full screen to see all styles)</small>
<div id="main">
    <article>
        <h2>Curl (CSS 3D)</h2>
        <ul class="curl"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysize</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysize</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Fourty</li><li>Fourtyone</li><li>Fourtytwo</li><li>Fourtythree</li><li>Fourtyfour</li><li>Fourtyfive</li><li>Fourtysix</li><li>Fourtyseven</li><li>Fourtyeight</li><li>Fourtynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li></ul>
    </article>
    <article>
        <h2>Wave</h2>
        <ul...

CSS

html, body {
    margin: 0px;
    padding: 0px;
}

body {
    background: #323232;
    font-family: 'Helvetica', sans-serif;
    font-size: 16px;
    color: #eee;
        padding: 20px;
    margin-bottom: 40px;
}

small {
     opacity: 0.6;   
}

article {
    display: inline-block;
    margin: 10px 20px 15px 0px;
}

h2 {
        font-size: 16px;
        font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}

ul {
    position: relative;
    width: 160px;
    height: 320px;
    overflow-x: hidden;
    overflow-y: scroll;
        padding: 0;
        margin: 0;
}
    ul li {
            list-style: none;
        position: relative;
        padding: 12px;
        background: #eee;
        color: #252525;
        font-size: 16px;
        z-index: 2;
    }
    ul li:nth-child(odd) {
        background: #fff;
    }


/**
 * Flip styles
 */
.flip {
    -webkit-perspective: 400px;
       -moz-perspective: 400px;
        -ms-perspective: 400px;
         -o-perspective: 400px;
            perspective: 400px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
         -o-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
}

    .flip li {
        -webkit-transition: all 600ms ease,
                            opacity 300ms ease;
           -moz-transition: all 600ms ease;
            -ms-transition: all 600ms ease,
                            opacity 300ms ease;
             -o-transition: all 600ms ease,
                            opacity 300ms ease;
                transition: all 600ms ease,
                            opacity 300ms ease;

        -webkit-transform-origin: 0% 0%;
           -moz-transform-origin: 0% 0%;
            -ms-transform-origin: 0% 0%;
             -o-transform-origin: 0% 0%;
                transform-origin: 0% 0%;
    }
        .flip li.past {
            opacity: 0;

            -webkit-transform-origin: 0% 100%;
              ...

JavaScript

/**
 * @author Hakim El Hattab | http://hakim.se
 */

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          window.oRequestAnimationFrame      ||
          window.msRequestAnimationFrame     ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


var Stroll = {
    bind: function(element) {

        var items = Array.prototype.slice.apply( element.children );

        // caching some heights so we don't need to go back to the DOM so much
        var listHeight = element.offsetHeight;

        // one loop to get the offsets from the DOM
        for( var i = 0, len = items.length; i < len; i++ ) {
            items[i]._offsetTop = items[i].offsetTop
            items[i]._offsetHeight = items[i].offsetHeight
        }

        return (function() {

            (function animloop(){
                requestAnimFrame( animloop );
                update();
            })();

            // Apply past/future classes to list items outside of the viewport
            function update() {
                var scrollTop = element.pageYOffset || element.scrollTop,
                    scrollBottom = scrollTop + listHeight;

                // Quit if nothing changed.
                if( scrollTop == element.lastTop ) return;

                element.lastTop = scrollTop;

                // One loop to make our changes to the DOM
                for( var i = 0, len = items.length; i < len; i++ ) {
                    var item = items[i];

                    // Above list viewport
                    if( item._offsetTop + item._offsetHeight < scrollTop ) {
                        item.classList.add( 'past' );
                    }
                    // Below list viewport
                    else if( item._offsetTop > scrollBottom ) {
                        item.classList.add( 'future' );
 ...