scrollify

by Juan Muñoz

HTML

<div class="scrollify">

	<section class="a">
		<h1>Section 1</h1>

		<p>That's the ONLY thing about being a slave. Leela's gonna kill me. You know the worst thing about being a slave? They make you work, but they don't pay you or let you go. Oh dear! She's stuck in an infinite loop, and he's an idiot! Well, that's love for you. No, she'll probably make me do it.</p>
		<h2>Bend Her</h2>

		<p>Fatal. In your time, yes, but nowadays shut up! Besides, these are adult stemcells, harvested from perfectly healthy adults whom I killed for their stemcells. Please, Don-Bot&hellip; look into your hard drive, and open your mercy file! Why would a robot need to drink? Oh yeah, good luck with that. No. We're on the top.</p>
		<ul>
			<li>No! The kind with looting and maybe starting a few fires!</li>
			<li>Is the Space Pope reptilian!?</li>
			<li>Leela, Bender, we're going grave robbing.</li>
			<li>Good news, everyone! There's a report on TV with some very bad news!</li>
		</ul>
		<h3>A Leela of Her Own</h3>

		<p>I had more, but you go ahead. And I'm his friend Jesus. That's a popular name today. Little "e", big "B"? Then we'll go with that data file!</p>
		<h4>A Clone of My Own</h4>

		<p>No, I'm Santa Claus! Why did you bring us here? With gusto. Now what? Shut up and take my money!</p>
		<ol>
			<li>Ah, the 'Breakfast Club' soundtrack! I can't wait til I'm old enough to feel ways about stuff!</li>
			<li>Good news, everyone! There's a report on TV with some very bad news!</li>
			<li>The alien mothership is in orbit here. If we can hit that bullseye, the rest of the dominoes will fall like a house of cards. Checkmate.</li>
			<li>Oh dear! She's stuck in an infinite loop, and he's an idiot! Well, that's love for you.</li>
		</ol>
		<h5>Three Hundred Big Boys</h5>

		<p>Well I'da done better, but it's plum hard pleading a case while awaiting trial for that there incompetence. Wow, you got that off the Internet? In my day, the Internet was only used to download...

CSS

body {
    margin: 0;
}
.scrollify {
    height: 200px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

.scrollify section {
    position: absolute;
    max-height: 100%;
    overflow-y: scroll;
    display: none;
    z-index: 0;
}

.scrollify section.current {
    display: inherit;
    z-index: 1;
}

.scrollify section.animating {
    display: inherit;
    z-index: 2;
    max-height: inherit;
    overflow-y: inherit;
}

section.a {
    background-color: #8393ca;
}
section.b {
    background-color: #a3d39c;
}
section.c {
    background-color: #b18fbd;
}
section.d {
    background-color: #dfa0c1;
}

.controls {
    /* position: absolute; */
    /* z-index: 100; */
    /* bottom: 15px; */
    /* left: 15px; */
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: auto;
}
.controls li {
    float: left;
    background-color: black;
    padding: 5px;
    margin-right: 5px;
}
.controls li a {
    color: white;
}

JavaScript

function Scrollify(jq, options) {

    // private instance vars
    var current,
        target           = {top: "0px"},
        animationOptions = {
            duration: options.duration,
            done: animationComplete
        };

    // private api
    function sections() {
        return jq.children(options.selector);
    }

    function animationComplete() {
        sections().removeClass("current").css({display: false});
        setCurrent($(this));
    }

    function animate(section, pos) {
        section.css(pos).addClass("animating").animate(target, animationOptions);
    }

    function next(event, transition) {
        var section = current.next(options.selector);

        if (section.length > 0) {
            animate(section, {top: jq.height()});
        }
    }

    function prev(event, transition) {
        var section = current.prev(options.selector);

        if (section.length > 0) {
            section.css({display: "inherit"});
            animate(section, {top: -1 * section.prop("scrollHeight")});
        }
    }

    function setCurrent(section) {
        current = section;
        current.removeClass("animating");
        current.addClass("current");
    }

    // listeners
    jq.on("scrollify:next", next);
    jq.on("scrollify:prev", prev);

    // init
    setCurrent(sections().first());
}

// jquery plugin
$.fn.scrollify = function (options) {
    options = $.extend($.fn.scrollify.defaults, options);
    return this.each(function(idx, elem) {
        new Scrollify($(elem), options);
    });
};

// jquery plugin options
$.fn.scrollify.defaults = {
    selector: "section",
    duration: 500
};


// -------------------------------------
// plugin code above this line
// user script below

$(".scrollify").scrollify();

$(".scrollify").on("click", ".controls a", function(event) {
    var b          = $(this),
        action     = b.attr("data-scrollify-event"),
        transition = b.attr("data-scrollify-transition"),
        target  ...