A CodePen by Tim Pietrusky. Return to the Scroll Effects of the Future! - Hakim El Hattab "stroll.js" meets Tim Pietrusky "CSS3 filter extension". If you don't see anything (cause this is webkit-only for the moment) you can watch it on #YouTube here: http://timpietrusky.com/return-to-the-scroll-effects-of-the-future

index.html

<!--
  Return to the Scroll Effects of the Future!
 
  Hakim El Hattab "stroll.js" meets Tim Pietrusky "CSS3 filter extension".

  If you don't see anything (cause this is webkit-only for the moment) 
  you can watch it on #YouTube here: 
  http://timpietrusky.com/return-to-the-scroll-effects-of-the-future

  wow! #_0 PUSH THE BUTTON!!!

  2012 by Tim Pietrusky
  timpietrusky.com
-->

<button role="push-me">bg</button>

script.js

var list_elements = ['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', 'Twentysix', 'Twentyseven', 'Twentyeight', 'Twentynine', 'Thirty', 'Thirtyone', 'Thirtytwo', 'Thirtythree', 'Thirtyfour', 'Thirtyfive', 'Thirtysix', 'Thirtyseven', 'Thirtyeight', 'Thirtynine', 'Forty', 'Fortyone', 'Fortytwo', 'Fortythree', 'Fortyfour', 'Fortyfive', 'Fortysix', 'Fortyseven', 'Fortyeight', 'Fortynine', '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 filter = ['blur', 'invert', 'sepia', 'brightness', 'grayscale', 'hue-rotate', 'saturate', 'all-filter', 'codepen'];

$.each(filter, function(i, v) { 
  if ($('body').has('ul.' + filter[i]).length < 1) {
    var _filter = $('<ul class="' + filter[i] + '"></ul>').appendTo('body');
    
    $.each(list_elements, function(i, v) {
      $('<li>' + list_elements[i] + '</li>').appendTo(_filter);
    });
    
    _filter.attr('data-content', filter[i]);
    
    stroll.bind(_filter);
  }
});

var trigger = false,
    counter = 0,
    images = [
    	'http://lorempixel.com/250/75/nightlife/5',
      'http://lorempixel.com/250/75/nightlife/6',
      'http://lorempixel.com/250/75/nightlife/7',
      'http://lorempixel.com/250/75/nightlife/8',
      'http://lorempixel.com/250/75/nightlife/2'
    ];

$('button[role="push-me"]').click(function(e) {
  if (trigger) {
    theFuture();
    trigger = false;
  } else {
    $('li').css('background-image', '');
    $('li').css('color', '#000');
    trigger = true;
  }
});

function theFuture() {
  $.each($('li'), function(i, v) {
    $(this).css('background-image', 'url(' + images[counter] + ')');
      
    if (counter++ > 3) {
      counter = 0;
    }
  });
    
  $('li').css('color', '#fff');
}

theFuture();

style.css

@import url(http://fonts.googleapis.com/css?family=Codystar);

html, 
body  {
    border-width: 0px;
    height:100%;
    width:100%;
    margin:0;
    padding:0; 
    overflow:show;
}

body {
  font: 18px "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  background:#666;
  padding-bottom:30%;
}

ul {
  position:relative;
  height: 430px;
  width: 250px;
  background: #fff;
  overflow-x: hidden;
  overflow-y: scroll;
  list-style: none;
  float:left;
  margin:25px 0 0 25px;
  padding:0;
  border:5px solid rgba(30, 30, 30, .3);
  box-shadow:0 0 10px rgba(0, 0, 0, .3);
}

ul:hover:after {
  position:fixed;
  right:15px;
  top:90px;
  z-index:1337;
  content: attr(data-content);
  color:#000;
  font: 65px 'Codystar', cursive;
  letter-spacing:10px;
  text-shadow:0 0 6px rgba(0, 0, 0, .5);
  padding:15px;
  background:rgba(255, 255, 255, .7);
  box-shadow:0 0 10px rgba(0, 0, 0, .5);
  border-right:30px solid #333;
  border-top-right-radius:20px;
  border-bottom-right-radius:20px;
}

li {
  height:30px;
  padding:15px;
  margin:2px 0;
  background:#ddd;
  background-size: 100%;
}

li:nth-child(odd) {
  background:#aaa;
}


/**
 * Blur
 */
.blur li {
  transition: all .35s ease-out .15s;
  transform-origin: 50% 50%;
}
.blur li.past {
  -webkit-filter:blur(10px);
  filter:blur(10px);
  transform:translateY(-10px);
}
.blur li.future {
  -webkit-filter:blur(10px);
  filter:blur(10px);
  transform:translateY(10px);
}


/**
 * Invert
 */
.invert li {
  transition: all .35s ease-out .15s;
}
.invert li.past {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
.invert li.future {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}


/**
 * Sepia
 */
.sepia li {
  transition: all .35s ease-out .3s;
}
.sepia li.past {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}
.sepia li.future {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}


/**
 * brightness
 */
.brightness li {
  transition: all .55s ease-out .25s;
  -webkit-filter: brightness(0);
  brightness(0);
}
.brightness li.past {
  -webkit-filter: brightness(.35);
  filter: brightness(.35);
}
.brightness li.future {
  -webkit-filter: brightness(.35);
  filter: brightness(.35);
}

/**
 * grayscale
 */
.grayscale li {
  transition: all .55s ease-out .25s;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
.grayscale li.past {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.grayscale li.future {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}


/**
 * hue-rotate
 */
.hue-rotate li {
  transition: all .65s ease-out .05s;
  -webkit-filter: hue-rotate(0);
  filter: hue-rotate(0);
}
.hue-rotate li.past {
  -webkit-filter: hue-rotate(130deg);
  filter: hue-rotate(130deg);
}
.hue-rotate li.future {
  -webkit-filter: hue-rotate(270deg);
  filter: hue-rotate(270deg);
}

/**
 * saturate
 */
.saturate li {
  transition: all .45s  ease-out;
  -webkit-filter: saturate(100%);
  filter: saturate(100%);
}
.saturate li.past {
  -webkit-filter: saturate(3%);
  filter: saturate(3%);
}
.saturate li.future {
  -webkit-filter: saturate(3%);
  filter: saturate(3%);
}

/**
 * all-filter
 */
.all-filter li {
  transition: all .55s  ease-out .15s;
  -webkit-filter: none;
  filter: none;
}
.all-filter li.past {
  -webkit-filter: saturate(3%) invert(100%) blur(10px) sepia(100%) grayscale(80%) hue-rotate(130deg);
  filter: saturate(3%) invert(100%) blur(10px) sepia(100%) grayscale(80%) hue-rotate(130deg);
}
.all-filter li.future {
  -webkit-filter: saturate(3%) invert(100%) blur(10px) sepia(100%) grayscale(80%) hue-rotate(130deg);
  filter: saturate(3%) invert(100%) blur(10px) sepia(100%) grayscale(80%) hue-rotate(130deg);
}


/**
 * codepen
 */
.codepen li {
  transition: all .35s  ease-out;
  -webkit-filter: none;
  filter: none;
}
.codepen li.past {
  -webkit-filter: blur(20px) sepia(100%) hue-rotate(130deg);
  filter: blur(20px) sepia(100%) hue-rotate(130deg);
  box-shadow:inset 0 0 20px rgba(90, 0, 0, 1);
  transform:scale(.4) rotate(-45deg);
  opacity:.1;
}
.codepen li.future {
  -webkit-filter: blur(20px) sepia(100%) hue-rotate(130deg);
  filter: blur(20px) sepia(100%) hue-rotate(130deg);
  box-shadow:inset 0 0 20px rgba(90, 0, 0, 1);
  transform:scale(.4) rotate(45deg);
  opacity:.1;
}

button {
  position:fixed;
  z-index:1337;
  right:15px;
  top:25px;
}


/**
 * Button by Joshua Hibbert
 * http://codepen.io/joshnh/details/32/2
 */
button {
    background-color: #999;
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    border: none;
    border-radius: .5em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                0 .25em .25em hsla(0,0%,0%,.1);
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 .5em 1em;
    padding: .5em 1.5em .75em;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    vertical-align: middle;
}

button:hover {
    outline: none;
}

button:hover,
button:focus {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em hsla(0,0%,0%,.1);
}

button:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                inset 0 .25em .5em hsla(0,0%,0%,.05),
                0 -1px 1px hsla(0,0%,0%,.1),
                0 1px 1px hsla(0,0%,100%,.25);
    margin-top: .25em;
    outline: none;
    padding-bottom: .5em;
}