Yuriy Yuriy - 5 months ago 32
jQuery Question

How to make vertical "slide" scroll?

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

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);
}