Creating effects for Hakim's Stroll

Fork this fiddle and enjoy creating your own fancy effects.

by Ronny

HTML

<script src="http://lab.hakim.se/scroll-effects/js/stroll.js"></script>
<!-- Create awesome 'Stroll' effects - Fork this fiddle. For the original demo, see http://lab.hakim.se/scroll-effects/ -->

<!-- Paste an existing effect's css twice, once with the original classname and once with myEffect. Replace the 'skew' class with the actual class of the original, and hack away. It might be useful to keep the original as reference -->

<ul class="skew"></ul>
<ul class="myEffect"></ul>

CSS

body {margin: 30px;}
ul {overflow: hidden; overflow-y: scroll; width: 150px; border: 1px solid #777; width: 230px; height: 480px; position: relative; float: left; margin-right: 20px;}

ul li {
    background: #eee;
    padding: 16px;
    font-size: 18px;
    position: relative;
    z-index: 2;
}
ul li:nth-child(odd) {
    background: #fff;
}

.myEffect {
     -webkit-perspective: 600px;
        -moz-perspective: 600px;
         -ms-perspective: 600px;
          -o-perspective: 600px;
             perspective: 600px;

     -webkit-perspective-origin: 0% 50%;
        -moz-perspective-origin: 0% 50%;
         -ms-perspective-origin: 0% 50%;
          -o-perspective-origin: 0% 50%;
             perspective-origin: 0% 50%;
 }
.myEffect li {
     -webkit-transition: all 600ms ease,
                         opacity 200ms ease;
        -moz-transition: all 600ms ease;
         -ms-transition: all 600ms ease;
          -o-transition: all 600ms ease;
             transition: all 600ms 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%;
}
 .myEffect li.past {
     -webkit-transform: skew( 0deg, 30deg );
        -moz-transform: skew( 0deg, 30deg );
         -ms-transform: skew( 0deg, 30deg );
          -o-transform: skew( 0deg, 30deg );
             transform: skew( 0deg, 30deg );
 }
 .myEffect li.future {
     z-index: 0;
     -webkit-transform: skew( 0deg, -30deg );
        -moz-transform: skew( 0deg, -30deg );
         -ms-transform: skew( 0deg, -30deg );
          -o-transform: skew( 0deg, -30deg );
             transform: skew( 0deg, -30deg );
 }


/*
    original effect
*/
.skew {
     -webkit-perspective: 600px;
        -moz-perspective: 600px;
         -ms-perspective: 600px;
          -o-perspective: 600px;
             perspective: 600px;

     -webkit-perspective-origin: 0% 50%;
        -moz-perspective-origin: 0%...

JavaScript

// List items are generated via JS cause it looks so damn 
// ugly when repeated all over the HTML
var items = 'One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten,Eleven,Twelve,Thirteen,Fourteen,Fifteen,Sixteen,Seventeen,Eighteen,Nineteen,Twenty,Twentyone,Twentytwo,Twentythree,Twentyfour,Twentyfive,Twentysize,Twentyseven,Twentyeight,Twentynine,Thirty,Thirtyone,Thirtytwo,Thirtythree,Thirtyfour,Thirtyfive,Thirtysize,Thirtyseven,Thirtyeight,Thirtynine,Fourty,Fourtyone,Fourtytwo,Fourtythree,Fourtyfour,Fourtyfive,Fourtysix,Fourtyseven,Fourtyeight,Fourtynine,Fifty,Fiftyone,Fiftytwo,Fiftythree,Fiftyfour,Fiftyfive,Fiftysix,Fiftyseven,Fiftyeight,Fiftynine,Sixty,Sixtyone,Sixtytwo,Sixtythree,Sixtyfour,Sixtyfive,Sixtysix,Sixtyseven,Sixtyeight,Sixtynine,Seventy,Seventyone,Seventytwo,Seventythree,Seventyfour,Seventyfive,Seventysix,Seventyseven,Seventyeight,Seventynine,Eighty,Eightyone,Eightytwo,Eightythree,Eightyfour,Eightyfive,Eightysix,Eightyseven,Eightyeight,Eightynine,Ninety,Ninetyone,Ninetytwo,Ninetythree,Ninetyfour,Ninetyfive,Ninetysix,Ninetyseven,Ninetyeight,Ninetynine';


var lists = document.querySelectorAll('ul');

for (var i = 0; i < lists.length; i++) {
    lists[i].innerHTML += '<li>' + items.split(',').join('</li><li>') + '</li>';

    Stroll.bind(lists[i]);
}