jQuery頁面滾動監聽事件及高級效果插件

時間 2019-11-11

標籤 jquery 頁面滾動監聽事件高級效果插件欄目 JQuery 简体版

原文原文鏈接

jQuery頁面滾動監聽事件及高級效果插件css

1. One Page scroll （只適用於上下焦點圖）
http://www.thepetedesign.com/demos/onepage_scroll_demo.htmlhtml

2. Scrolld（更很差用）
https://github.com/charliegeiger89/Scrolld.js#readmejquery

3. Animate Scroll（參數太少，很差用）
https://github.com/ramswaroop/animatescroll.js#readmegit

概括地址：
http://udn.yyuap.com/thread-68533-1-1.htmlgithub

onepage-scrollweb

demo.htmlapp

<!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.cssoop

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