全页滚动 [英] Full page scroll

查看:107
本文介绍了全页滚动的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想创建一个整页的滑块(上下). 我的意思是,您可以使用鼠标滚轮滚动,但整个页面都将滚动至下一页div:而不是滚动.

I would like to create a full page slider (up and down). What I mean is that you can use the mousewheel to scroll, but instead of scrolling, the entire page slides to the next page div: .

我问的原因:我很想学习有关矩阵和优化动画/过渡的更多信息.

Reason I ask: I would love to learn more about matrix and optimizing animations/transition.

»»很棒的例子««

推荐答案

答案

所以... 22小时后,由于你们的一些批评和技巧,我学到了很多东西.

So... 22 hours later and I learned a lot thanks to some critical opinions and tips from you guys.

一些stackoverflow助手,再次感谢:

Some stackoverflow helpers, thanks again:

  • 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>

点击整页以获得更好的视图

Click full page for better view

这篇关于全页滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆