css代碼：

.section,.section .section-content p{
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
}
body{background-color: #48cfad;color: #fff;overflow-x: hidden;}
header{height: 100vh;text-align: center;line-height: 100vh;}
.page-wrapper{width: 80%;margin: 50px auto;box-sizing: border-box;}
.section{
    width: 100%;height: 100vh;padding: 40px 0;opacity: 0;
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
}
.section h2{font-size: 30px;text-align: center;}
.section .section-content{width: 80%;margin: 0 auto;text-align: center;}
.section .section-content p{
    max-width: 80%;margin: 20px auto 50px;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px);
}
.section.animation{
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
.section.animation .section-content p{
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

html代碼：

<header>
    <h1>Animation on Scroll</h1>
</header>
<main class="page-wrapper">
    <section class="section">
        <h2>SECTION</h2>
        <div class="section-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi at, atque commodi cupiditate doloremque eius exercitationem, maiores modi obcaecati officia quod, recusandae sed sequi sit soluta sunt vitae! Temporibus.</p>
        </div>
    </section>
    
    <br /><br /><br /><br /><br />
    
    <section class="section">
        <h2>SECTION</h2>
        <div class="section-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi at, atque commodi cupiditate doloremque eius exercitationem, maiores modi obcaecati officia quod, recusandae sed sequi sit soluta sunt vitae! Temporibus.</p>
        </div>
    </section>
</main>

js代碼：

function revealOnScroll() {
    var scrolled = $(window).scrollTop();// 視窗步势，即viewport衙四，頁面可視范圍的窗口

    $(".section").each(function() {
        var current = $(this), // 當(dāng)前元素
            w_height = $(window).outerHeight(), //視窗高度
            offsetTop = current.offset().top; //當(dāng)前元素離頂部的高度

        // 計(jì)算高度差（此處預(yù)留50是為了看效果）
        // 當(dāng)元素進(jìn)入視窗時(shí)沪伙，添加class
        if (scrolled + w_height - 50 > offsetTop) {
            current.addClass("animation");
        } else {
            current.removeClass("animation");
        }
    });
}
$(window).on("scroll", revealOnScroll);