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代码：

Animation on Scroll

SECTION

SECTION

js代码：

function revealOnScroll() {

var scrolled = $(window).scrollTop();// 视窗，即viewport，页面可视范围的窗口

$(“.section”).each(function() {

var current = $(this), // 当前元素

w_height = $(window).outerHeight(), //视窗高度

offsetTop = current.offset().top; //当前元素离顶部的高度

// 计算高度差(此处预留50是为了看效果)

// 当元素进入视窗时，添加class

if (scrolled + w_height – 50 > offsetTop) {

current.addClass(“animation”);

} else {

current.removeClass(“animation”);

}

});

}

$(window).on(“scroll”, revealOnScroll);