スクロールjsトリガcss 3アニメーション
3077 ワード
cssコード:
htmlコード:
jsコード:
…………END…………
ありがとうございます❤
.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
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.
SECTION
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.
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);
…………END…………
ありがとうございます❤