Move on Scroll

Animated timeline effect

HTML

<span id="bar"></span>
<div id="wrap">
<div id="inner">
    <div class="row title">
        <span class="left">Section</span>
        <span class="right">1</span>
    </div>
    <div class="row">
        <span class="left box"><span>Image</span></span>
        <span class="right text"><span>Text</span></span>
    </div>
    <div class="row">
        <span class="left text"><span>Text</span></span>
        <span class="right box"><span>Image</span></span>
    </div>
    <div class="row">
        <span class="left box"><span>Image</span></span>
        <span class="right text"><span>Text</span></span>
    </div>
    <div class="row">
        <span class="left text"><span>Text</span></span>
        <span class="right box"><span>Image</span></span>
    </div>
    <div class="row title">
        <span class="left">Section</span>
        <span class="right">2</span>
    </div>
    <div class="row">
        <span class="left box"><span>Image</span></span>
        <span class="right text"><span>Text</span></span>
    </div>
    <div class="row">
        <span class="left text"><span>Text</span></span>
        <span class="right box"><span>Image</span></span>
    </div>
    <div class="row">
        <span class="left box"><span>Image</span></span>
        <span class="right text"><span>Text</span></span>
    </div>
    <div class="row">
        <span class="left text"><span>Text</span></span>
        <span class="right box"><span>Image</span></span>
    </div>
    <div class="row title">
        <span class="left">Section</span>
        <span class="right">3</span>
    </div>
    <div class="row">
        <span class="left box"><span>Image</span></span>
        <span class="right text"><span>Text</span></span>
    </div>
    <div class="row">
        <span class="left text"><span>Text</span></span>
        <span class="right box"><span>Image</span></span>
    </div>
    <div class="row">
        <span class="left box"><span>Image</span></span>
        <span class="right...

CSS

/* common */
html, body { margin:0; padding:0 }
#bar { position:absolute }
#wrap { position:relative }
.left, .right span { float:left }
.right, .left span { float:right }
.row, .row span span, #padder { display:block }
#wrap { overflow:auto }
html, #inner { overflow:hidden }

/* main */
html, body, #wrap, #bar { height:100% }
html, body, #wrap { width:100% }
#bar { width:4px }
.row { margin:7px 0 }
.row, .row span { height:200px }
.row span { width:50% }
.text span { height:50px; width:80%; margin:75px 0 }
.box span { height:200px; width:200px }
.row.title, .row.title span { height:2em }

/* positioning */
html, #wrap { width:100% }
#bar { left:50%; margin-left:-10px; z-index:2 }
.left { left:-2% }
.right { right:-2% }

/* background */
.row { background-color:#FFFFFF }
.row span span { background-color:#CCCCCC }
#bar { background:#000000 }

/* typo */
.left { text-align:right }
.right { text-align:left }

/* safari and chrome */
.row { -webkit-transform-style: preserve-3d }

/* doesn't matter */
body { font-family: Verdana, sans-serif }
.row span { font-size:120%; text-transform:uppercase; letter-spacing:3px }
.row span span { font-size:50%; text-transform:none; letter-spacing:0 }

JavaScript

// this was made in response to this tutorial http://tympanus.net/Tutorials/LateralOnScrollSliding/
//
// which seemed pretty cool until I looked at the painfully obsurd way it was put together, the lack of
// compatibility and functionality, and the fact that there was a seperate page for "webkit-only" that really only
// worked in safari (not webkit in general)
//
// I've taken thier general idea and rewrote it to be less than 25% of the original code size, react much more
// responsively, and work in every browser I've tested in (yes ie6 included)
//
// The page acts differently in firefox, chrome and safari, and everything else to allow for the most enjoyable
// experience I could in each, and takes advantage of webkits 3d transform effects
//
// update 052913 :: mozilla no longer needs targeting, now updates live on scroll
//
// update 112613 :: IE10 seems to be really choppy, and not updating irt. I'll need to look into it more to fix the speed.
//
// please let me know if you experience any problems or spot any bugs so that I can update this demo to fix those
// issues


function move() {
    var bh = $('body').height();
    $('.row').each(function() {
        var rh = $(this).offset().top; //get distance between row and top of window
        var op = 0.3; //position to come together (0=top :: 1=bottom)
        var dn = ((rh/bh)-op)*100; //turn distance into pos
        var oo = ((dn-50)*-2)/100; //calc opacity
        if (oo < 0.2) { oo = 0.2; } //minimum opacity
        var as = 500; //speed *animation is not active, css is faster than animate but choppy in ff
        //min and max values && bottom pos/opacity
        if (dn < 2 || Math.abs($('#inner').offset().top) + $('#wrap').height() + $('#wrap').offset().top >= ($('#inner').outerHeight() - 1)) { dn = 2; oo = 1; }
        else if (dn > 50) { dn = 50; }
        //animation
        if ('WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix()) { //for 3d animations
            var rd = (dn/50)*270;...