plugin: Fold Scrolling

by secretgspot

HTML

<script src="http://soulwire.github.com/FoldScroll/js/foldscroll.js"></script>
<section class="quotes"></section>

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

// Data
var quotes = [
    {
        "author": "Jackson Pollock",
        "quote": "Technique is just a means of arriving at a statement"
    },
    {
        "author": "Terence Mckenna",
        "quote": "Perhaps a human language is possible in which the intent of meaning is actually beheld in three-dimensional space"
    },
    {
        "author": "Mina Loy",
        "quote": "All the virgin eyes in the world are made of glass"
    },
    {
        "author": "Oskar Schlemmer",
        "quote": "We are intensely aware of man as a machine and the body as a mechanism"
    },
    {
        "author": "Alison Lurie",
        "quote": "It is already too late, and it will go on being even later"
    },
    {
        "author": "Linus Pauling",
        "quote": "Science cannot be stopped. Man will gather knowledge no matter what the consequences - and we cannot predict what they will be"
    },
    {
        "author": "Tarjei Vesaas",
        "quote": "No one can witness the fall of the ice palace. It takes place at night, after all the children are in bed."
    },
    {
        "author": "Terence McKenna",
        "quote": "The biological object is made of time as much as it is made of space and matter"
    },
    {
        "author": "William James",
        "quote": "The union of the mathematician with the poet, fervor with measure, passion with correctness, this surely is the ideal"
    },
    {
        "author": "Camille Paglia",
        "quote": "Mind is a captive of the body"
    },
    {
        "author": "Nathaniel West via Amos Vogel",
        "quote": "Your order is meaningless, my chaos is significant"
    },
    {
        "author": "Harold W",
        "quote": "Every thing existing on the physical plane is an exteriorization of thought, which must be balanced through the one who issued the thought, and in accordance with that one's responsibility, at the conjunction of time, condition, and place"
    },
    {
        "author": "Pirandello",
        "quote":...