How to make vertical “slide” scroll?

Question

I have a landing page, consisting of three frames, this frames always take 100% of viewport height and width. I need to make transitions between frames, like "powerpoint presentation" etc. User scroll's, frame-1 slides up above viewport and frame-2 becomes in his place from bottom of viewport. I have almost zero experience in javascript/jquery. Have some ideas, that you can see in the code, but this ideas not works.

HTML:

<div class="wrapper" id="wrapper">
    <div class="frame frame-1">
        <!-- Content here -->
    </div>
<div class="frame frame-2">
    <!-- Content here -->
    </div>
    <div class="frame frame-3">
        <!-- Content here -->
    </div>
</div>

CSS:

.wrapper {
    height: 300vh;
}
.frame {
    position: fixed;
    height: 100vh;
    transition: all 1s ease;
}
.frame-1 {
    top: 0vh;
}
.frame-2 {
    top: 100vh;
}
.frame-3 {
    top: 200vh;
}

JS:

var $document = $(document),
    $element1 = $('.frame-1'),
    $element2 = $('.frame-2'),
    $element3 = $('.frame-3');

$(window).scroll(function () {
    if ($(this).scrollTop() >= 50) {
        $element1.css("top", "-100vh");
        $element2.css("top", "0vh");
        $element3.css("top", "100vh");
    } else if ($(this).scrollTop() >= 100) {
        $element1.css("top", "-200vh");
        $element2.css("top", "-100vh");
        $element3.css("top", "0vh");
    } else {
        $element1.css("top", "0vh");
        $element2.css("top", "100vh");
        $element3.css("top", "200vh");
    }
});

Answer 1

This js could be your solution

http://alvarotrigo.com/fullPage/

Answer 2

If you have a set number of frames, I would suggest placing them all in a single div , and changing the top value of that. that way, only one value need be modified.

Like this: http://jsfiddle.net/xkh4D/10/

(Note that, though px are used, vh or whichever other unit should work just as well... haven't tried % , though...)

HTML

<div id='yo' class='view'>
    <div>
        <div class='frame red'></div>
        <div class='frame green'></div>
        <div class='frame blue'></div>
    </div>
</div>
<input type='button' value='Scroll' onclick='scrollFrame()'/>

CSS

.view {
    position:relative;
    width:300px;
    height:250px;
    border:1px solid black;
    overflow:hidden;
}
.view > div {
    position:absolute;
    width:inherit;
    height:inherit;
    top:0px;
}
.frame {
    width:inherit;
    height:inherit;
}
.red { background-color:#faa }
.green { background-color:#afa }
.blue { background-color:#aaf }

JavaScript

scrollFrame = function()
{
    var h = $('#yo').height();
    var y = parseFloat($('.view > div').css('top'));

    var hsum = $('.view .frame').length * h;

    console.log('h,y,hsum',h,y,hsum);

    if (hsum-h == -1*y)
        $('.view > div').animate({'top':0});
    else
        $('.view > div').animate({top:y-h},500);
}