Fold Prototype

Folding scroll proof of concept

HTML

<div id="container">
    <article style="height:200px"></article>
    <article style="height:100px"></article>
    <article style="height:300px"></article>
    <article style="height:140px"></article>
    <article style="height:220px"></article>
    <article style="height:280px"></article>
    <article style="height:190px"></article>
    <article style="height:300px"></article>
    <article style="height:100px"></article>
    <article style="height:500px"></article>
</div>
<div id="viewport"></div>

CSS

html, body {
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    background: #f2f2f2;
    font-size: 12px;
    margin: 0;
}

#container {
}

article {
    -webkit-backface-visibility: hidden; /* improve performance */
    border-top: 1px dashed #eee;
    position: relative;
    background: #fff;
    padding: 20px;
    margin: 0px 20px;
    height: 800px;
    color: #000;
}

#viewport {
    box-sizing: border-box;
    border: 1px dashed rgba(255,0,255,0.5);
    text-align: right;
    position: fixed;
    padding: 20px;
    height: 60%;
    width: 100%;
    left: 0%;
    top: 20%;
}

#viewport:before {
    background: rgba(255,0,255,0.02);
    position: absolute;
    display: block;
    content: '';
    height: 20%;
    width: 100%;
    left: 0;
    top: 0;
}

#viewport:after {
    background: rgba(255,0,255,0.02);
    position: absolute;
    display: block;
    content: 'Bums';
    height: 25%;
    width: 100%;
    left: 0;
    bottom: 0;
}

JavaScript

$( function() {
    
    var $con = $('#container');
    var $win = $(window);
    var $vp = $('#viewport');
    
    // fix height
    $con.height( $con.outerHeight(true) );
    
    $('article').each(function(i,el) {
        
        var $el = $(el);
        var $log = $( '<span/>' ).appendTo( $el );
        var $shade = $('<div/>').css({
            background: 'rgba(0,0,0,0.2)',
            position: 'absolute',
            display: 'none',
            height: '100%',
            width: '100%',
            left: 0,
            top: 0
        }).appendTo( $el );
        
        $win.scroll(function() {
            
            // remove transform
            $el.css({ '-webkit-transform': 'none' });
            $shade.hide();
            
            var st = $win.scrollTop();
            
            // viewport properties
            var vt = $vp.offset().top - st;
            var vh = $vp.outerHeight();
            var vb = vt + vh;
            
            // element properties
            var et = $el.offset().top - st;
            var eh = $el.outerHeight();
            var eb = et + eh;
            
            $vp.html(
                'vt : ' + vt + '<br/>' +
                'vh : ' + vh + '<br/>' +
                'vb : ' + vb + '<br/>'
            );
            
            // highest start value
            var a = Math.max( vt, et );

            // lowest end value
            var b = Math.min( vb, eb );
            
            //
            var debug = 
                'st : ' + st + '<br/>' +
                'et : ' + et + '<br/>' +
                'eb : ' + eb + '<br/>' +
                'a : ' + a + '<br/>' +
                'b : ' + b + '<br/>';
            //
            
            if ( a < b ) { // if there's overlap
                
                // overlap
                var o = b - a;
                var p = o / vh; // breaks if eh < vh
                
                if ( p < 0.2 ) {

                    // normalise
        ...