jquery - 整页滚动

Question

整页(垂直) slider

我想创建一个整页 slider (向上和向下)。 我的意思是，你可以使用鼠标滚轮滚动，但不是滚动，而是整个页面滑动到下一页div: 。

我问的原因:我想了解更多关于矩阵和优化动画/过渡的知识。

» » Awesome example « «

Answer 1

回答

所以... 22 小时后，我学到了很多东西，感谢你们的一些批评意见和提示。

一些 stackoverflow 助手，再次感谢:

• > J.T. Crowder
• > Rotan075

无论如何..这是我的代码:

// jQuery

$(document).ready(function() {
    // --- VARIABLES
    var fullAnimation = false;
    var currentSlide = 0;
    var lastSlide = $('.page').length - 1;
    var scrollDirection = "";

    // --- FUNCTIONS
    function slidePage(scrollDirection, currentSlide) {
        fullAnimation = false;
        if(scrollDirection == "down") {
            $('.current-slide-animating').toggleClass('current-slide-animating prev-slide');
            $('.page').eq(currentSlide - 1).addClass('prev-slide');
            if(currentSlide != lastSlide) {
                $('.page').eq(currentSlide + 1).addClass('next-slide');
            }
        } else {
            $('.current-slide-animating').toggleClass('current-slide-animating next-slide');
            $('.page').eq(currentSlide + 1).addClass('next-slide');
            if(currentSlide != 0) {
                $('.page').eq(currentSlide - 1).addClass('prev-slide');
            }
        } 
    }

    // --- EVENTS
    $(window).bind('mousewheel', function(event) {
        scrollDirection = event.originalEvent.wheelDelta > 0 ? "up" : "down";
        if(fullAnimation == false) {
            // if scroll down
            if(currentSlide != lastSlide && scrollDirection == "down") {
                fullAnimation = true;
                currentSlide += 1;
                $('.current-slide').toggleClass('current-slide current-slide-animating')
                $('.next-slide').toggleClass('next-slide current-slide');
                $('.page.prev-slide').removeClass('prev-slide');
                $('.page.next-slide').removeClass('next-slide');
                setTimeout(function() {
                    slidePage(scrollDirection, currentSlide)
                }, 600);
            }
            // if scroll up
            if(currentSlide != 0 && scrollDirection == "up") {
                fullAnimation = true;
                currentSlide -= 1;
                $('.current-slide').toggleClass('current-slide current-slide-animating')
                $('.prev-slide').toggleClass('prev-slide current-slide');
                $('.page.prev-slide').removeClass('prev-slide');
                $('.page.next-slide').removeClass('next-slide');
                setTimeout(function() {
                    slidePage(scrollDirection, currentSlide)
                }, 600);
            }
        }
    });
});

/* CSS */

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300italic,300,400,400italic,500);

*, *:after, *:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-wrap: break-word;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}

html {
    background-color: #FFF;
    height: 100%;
    width: 100%;
    font-size: 1.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    background-color: #333;
    color: #333;
    fill: currentColor;
    height: 100%;
    width: 100%;
    max-height: 100vh;
    min-width: 16.666667em;
    overflow: hidden; 
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    font-style: normal;
    letter-spacing: 1px;
    line-height: 1.65em;
}

main {
	display: table;
	width: 100%;
    padding-bottom: 33px;
    padding-top: 20px;
}

.main, .page {
    width: 100%;
    height: 100%;
}
.main {
    overflow: hidden;
}
.page {
    position: absolute;
    opacity: 0;
    overflow: auto;
}
.page.current-slide {
    opacity: 1;
    z-index: 2;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition:
        opacity 350ms cubic-bezier(.4, 0, .2, 1),
        -webkit-transform 600ms cubic-bezier(.4, 0, .2, 1),
        transform 600ms cubic-bezier(.4, 0, .2, 1);
}
.page.current-slide-animating {
    opacity: 0;
    z-index: 1;
    -webkit-transform: scale(.9);
    transform: scale(.9);
    transition:
        opacity 350ms cubic-bezier(.4, 0, .2, 1) 100ms,
        -webkit-transform 500ms cubic-bezier(.4, 0, .2, 1),
        transform 500ms cubic-bezier(.4, 0, .2, 1);
}
.page.prev-slide,
.page.next-slide {
    opacity: 1;
    z-index: 2;
}
.page.prev-slide {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
.page.next-slide {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.page.one {
    background-color: #4bffc5;
}
.page.two {
    background-color: #a497ff;
}
.page.three {
    background-color: #ff5152;
}
.page.four {
    background-color: #3d98ff;
}

<!-- HTML -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <body>
        <!-- get a main div -->
        <div class="main">
            <!-- this is the div where you will place your desktop website -->
            <div class="page one current-slide"></div>
            <div class="page two next-slide"></div>
            <div class="page three"></div>
            <div class="page four"></div>
        </div>
    </body>

点击整页查看效果更佳