JSFiddle - React, Tailwind, and code Playground

Fold Scroll http://codepen.io/soulwire/details/DhsfE

by Jennifer Perrin

HTML

<section id="info">
    <header>
        <hgroup>
            <h1>FoldScroll</h1>
            <h2>Experimental CSS 3D scroll behavior</h2>
        </hgroup>
        <a href="https://github.com/soulwire/FoldScroll/zipball/master" target="_blank">Download</a>
        <a href="https://github.com/soulwire/FoldScroll" target="_blank">View on Github</a>
    </header>
    <aside>
        <p>Quotes from <a href="http://http://butdoesitfloat.com/" target="_blank">http://butdoesitfloat.com/</a></p>
    </aside>
</section>

<section class="quotes">
    <article>
        <p>Technique is just a means of arriving at a statement</p>
        <em>Jackson Pollock</em>
    </article>
    <article>
        <p>Perhaps a human language is possible in which the intent of meaning is actually beheld in three-dimensional space</p>
        <em>Terence Mckenna</em>
    </article>
    <article>
        <p>All the virgin eyes in the world are made of glass</p>
        <em>Mina Loy</em>
    </article>
    <article>
        <p>We are intensely aware of man as a machine and the body as a mechanism</p>
        <em>Oskar Schlemmer</em>
    </article>
    <article>
        <p>It is already too late, and it will go on being even later</p>
        <em>Alison Lurie</em>
    </article>
    <article>
        <p>Science cannot be stopped. Man will gather knowledge no matter what the consequences - and we cannot predict what they will be</p>
        <em>Linus Pauling</em>
    </article>
    <article>
        <p>No one can witness the fall of the ice palace. It takes place at night, after all the children are in bed.</p>
        <em>Tarjei Vesaas</em>
    </article>
    <article>
        <p>The biological object is made of time as much as it is made of space and matter</p>
        <em>Terence McKenna</em>
    </article>
    <article>
        <p>The union of the mathematician with the poet, fervor with measure, passion with correctness, this surely is the ideal</p>
        <em>William James</em>
   ...

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    font-family: Consolas, monospace;
    background: #f2f2f2;
    padding: 0;
    margin: 0;
}

/* Info */

#info {
    font-size: 12px;
    position: absolute;
    z-index: 1;
    color: #fff;
    width: 260px;
    left: 20px;
    top: 20px;
}

#info a {
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.5);
}

#info a:hover {
    color: #fff;
}

#info header, #info aside {
    font-family: 'Play', sans-serif;
    background: rgba(0, 0, 0, 0.8);
    margin-bottom: 1px;
}

#info header {
    padding: 12px 10px;
}

#info header hgroup h1 {
    line-height: 22px;
    font-weight: 300;
    font-size: 18px;
    margin: 0;
}

#info header hgroup h2 {
    line-height: 14px;
    font-weight: 300;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 6px 0;
}

#info header a {
    text-transform: uppercase;
    margin-right: 4px;
    line-height: 20px;
    font-size: 10px;
}

#info aside {
    padding: 2px 10px;
}

/* Demo */

.quotes {
    position: absolute;
    bottom: 20px;
    width: 100%;
    left: 0;
    top: 20px;
}

.quotes article {
    border-bottom: 1px dashed #ddd;
    text-align: justify;
    line-height: 1.8;
    background: #fff;
    max-width: 620px;
    font-size: 14px;
    padding: 80px 40px;
    margin: 0 auto;
    width: 600px;
    color: #333;
}

.quotes article em {
    font-style: normal;
    font-size: 12px;
    color: #666;
}

.quotes article em:before {
    content: '~';
    margin: 0 10px;
}

JavaScript

(function($) {

    $.fn.foldscroll = function( options ) {

        // Constants
        var PI = Math.PI;
        var HALF_PI = PI / 2;

        // Merge options & defaults
        var opts = $.extend( {}, $.fn.foldscroll.defaults, options );

        // Transformation template
        var rot = 'perspective(' + opts.perspective + 'px) rotateX(θrad)';

        // Main plugin loop
        return this.each( function () {

            var $this = $( this );
            var $kids = $this.children();
            var $item;
            var $shading;

            if ( opts.shading ) {

                // Create an overlay for shading
                $shading = $( '<span class="shading"/>' ).css({
                    background: opts.shading,
                    position: 'absolute',
                    opacity: 0.0,
                    height: '100%',
                    width: '100%',
                    left: 0,
                    top: 0
                });

                // Add shading to each child
                $kids.each( function() {

                    $item = $(this);
                    $item.css( prefix({
                        'backface-visibility': 'hidden',
                        'transform-style': 'preserve-3d' // Fixes perspective in FF 10+
                    }));

                    // Make sure shading isn't already applied
                    if ( !$item.data( '_shading' ) ) {

                        $shading = $shading.clone();

                        // Prepare element
                        $item.css( 'position', 'relative' );
                        $item.data( '_shading', $shading );
                        $item.append( $shading );
                    }
                });
            }

            // Prepare container
            $this.css( prefix({ 'backface-visibility': 'hidden' }));
            $this.css({ overflow: 'scroll' });

            $this.on( 'scroll', function() {

                // Store scroll amount
            ...