jQuery页面滚动监听事件及高级效果插件

jQuery页面滚动监听事件及高级效果插件

1. One Page scroll （只适用于上下焦点图）
http://www.thepetedesign.com/demos/onepage_scroll_demo.html

2. Scrolld（更不好用）
https://github.com/charliegeiger89/Scrolld.js#readme

3. Animate Scroll（参数太少，不好用）
https://github.com/ramswaroop/animatescroll.js#readme

归纳地址：
http://udn.yyuap.com/thread-68533-1-1.html

 

onepage-scroll

demo.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>onpage-scroll</title>
    <link rel="stylesheet" href="onepage-scroll.css">
    <link rel="stylesheet" href="demo.css">
    <script src="jquery-3.1.1.min.js"></script>
    <script src="jquery.onepage-scroll.min.js"></script>
</head>
<body>

<div class="wrapper">
    <div class="main onepage-wrapper">
        <section class="section page1">
            <img src="phones.png" alt="phones">
        </section>
        <section class="section page2">
            <img src="back-phone.png" alt="back-phone">
        </section>
        <section class="section page3">
            <img src="tilted-phone.png" alt="tiled-phone">
        </section>
    </div>
</div>



<script>
$(function () {
    $('.main section.page1 > img ').delay(300).animate({
        'right': '0'
    }, 300);
});

$('.main').onepage_scroll({
    sectionContainer: "section",
    easing: "ease",
    animationTime: 300,
    pagination:true,
    updateURL: false,
    beforeMove: function (index) {
        switch (index) {
            case 1:
                $('.main section.page1 > img ').css({
                    'right': '-300px'
                });
                break;
            case 2:
                $('.main section.page2 > img ').css({
                    'left': '-150px'
                });
                break;
            case 3:
                $('.main section.page3 > img ').css({
                    'left': '-150px'
                });
            default:
                break;    
        }
    },
    afterMove: function (index) {
        switch (index) {
            case 1:
                $('.main section.page1 > img ').animate({
                    'right': '0'
                }, 300);
                break;
            case 2:
                $('.main section.page2 > img ').animate({
                    'left': '0'
                }, 300);
                break;
            case 3:
                $('.main section.page3 > img ').animate({
                    'left': '0'
                }, 300);
                break;
            default:
                break;    
        }
    },
    loop: false,
    keyboard: true,
    responsiveFallback: false,
    direction: "vertical"
});
</script>


    
</body>
</html>

 

demo.css

html {
    height: 100%;
}

body {
    background: #e2e4e7;
    padding: 0;
    text-align: center;
    font-family: 'open sans';
    position: relative;
    margin: 0;
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

.wrapper {
    height: 100% !important;
    margin: 0 auto;
     overflow: hidden; 
}

.main {
    width: 100%;
    float: left;
    margin: 0 auto;
}

.onepage-wrapper {
    width: 100%;
    height: 100%;
    display: block;
}

.onepage-wrapper .section {
    width: 100%;
    height: 100%;
}

.main section.page1 {
    background: rgb(230, 217, 200);
}

.main section.page2 {
    background: #555557 no-repeat center;
}
.main section.page3 {
    background:  no-repeat;
}

.main section.page1 > img {
    position: absolute;
    right: -300px;
}

.main section.page2 > img {
    position: absolute;
    left: -150px;
}

.main section.page3 > img {
    position: absolute;
    left: 156px;
}

 

项目地址：

https://github.com/liuqiuchen/onepage-scroll

 

posted on 2016-10-24 17:57  Asina  阅读(4856)  评论(0)  编辑  收藏  举报