【jQuery】フルページスクロールエフェクトプラグインnaiveScroll

naiveScrollは軽量のフルページスクロールエフェクトjQueryプラグイン

HTML

基本はsection

<body>
<section class="page1"></section>
<section class="page2"></section>
<section class="page3"></section>
</body>

CSS

/* use background color */
.page1 {
top: 0;
background-color: lightcoral;
}
/* or use background image */
.page2 {
top: 100%;
background: url("foo.jpg") no-repeat center center;
background-size: cover;
}
/* notice the top property */
.page3 {
top: 200%;
background-color: lightblue;
}

JS

$('#upBtn').click(function () {
$(this)._naiveScroll.triggerScroll(100);
});
$('#downBtn').click(function () {
$(this)._naiveScroll.triggerScroll(-100);
});
 
naiveScroll

【jQuery】フルページスクロールエフェクトプラグインnaiveScroll

  • LATEST
  • RELATED
  • POPULAR