scroll based view

by techsin

HTML

<div class="slides">
    <div class="slide">Hi, my name is Mister Your Freind</div>
    <div class="slide">I am about to tell you something that will change your life for better...</div>
    <div class="slide">you must listen to me...for it is most neccessary for the very urgent time that has fallen upon you..</div>
    <div class="slide">I gotta go..</div>
    <div class="slide">...to be continue</div>
</div>

CSS

.slides {
    width: 300px;
    height: 500px;
    border:solid;
    position:fixed;
    left: 50%; top:0;
    margin-left: -25%;
}
.slide {
    padding: 20px;
    position:absolute;
    display:none;
}
html,body {
    overflow: hidden;
}

JavaScript

var doc = $(document),
    wpoints = [5, 10, 15, 20, 25], //5 points for 5 slides...1st slide appear at start
    mh= wpoints[wpoints.length - 1], //and switch to 2nd at '5', and scrolling stop at 25
    h = wpoints[0],
    l = 0,
    i = 0,
    pos = 0;

doc.on('mousewheel', function (e) {
    if (e.originalEvent.wheelDelta > 0) {
        if (pos > 0) pos--;
    } else if (pos<mh) pos++;
   
    if (pos >= h){ set(1); }
    else if (pos <= l) set(-1);
});

function set(x) {
    if (x == 1 && (wpoints[i + 1] != undefined)) {
        l = h
        h = wpoints[++i];
        doWork();
    }

    if (x == -1 && (wpoints[i - 1] != undefined)) {
        h = l
        l = wpoints[--i - 1];
        doWork();
    }
}

doWork();
function doWork() {$('.slide').hide().eq(i).slideDown();}