如何制作垂直“幻灯片”卷轴？

Question

我有一个着陆页面，由三个帧组成，这个画面总是100%的视口高度和宽度。我需要使帧之间的转换，如"powerpoint演示文稿“等。用户滚动，框架-1幻灯片以上的视口和框架-2成为他的位置从底部的视口。我在javascript/jquery方面几乎没有经验。有一些想法，你可以在代码中看到，但这个想法行不通。

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

联署材料：

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

如果有一定数量的帧，我建议将它们全部放在一个div中，并更改该值的top值。这样，只需要修改一个值。

像这样：http://jsfiddle.net/xkh4D/10/

(请注意，虽然使用了px，但vh或其他任何单元都应该同样工作.但还没有试过% .)

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

Answer 2

这个js可能是你的解决方案

http://alvarotrigo.com/fullPage/