WEBサイトで1ページ毎にスクロールさせたい！
そんなことが、pagePhiling.jsを実装すれば可能になります。
pagePhiling.js←公式HPからプラグインをダウンロード！
デモ←私のポートフォリオですが、pagePhilingを実装しております。ご覧ください！
準備するもの
- html,cssファイル
- javascript基礎知識
- やる気スイッチ
- pagePhiling.jsをダウンロード
実装する
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- stylesheet -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="pagePiling.js-master/jquery.pagepiling.css">
<body>
<!-- nav要素 -->
<ul id="nav">
<li data-menuanchor="Page1" class="active"><a href="#Page1">First section</a></li>
<li data-menuanchor="Page2"><a href="#Page2">Second section</a></li>
<li data-menuanchor="Page3"><a href="#Page3">Third section</a></li>
<li data-menuanchor="Page4"><a href="#Page4">Fourth section</a></li>
</ul>
<!-- section毎に内容を記述する -->
<div id="pagepiling">
<div class="section" id="section1"> section 1</div>
<div class="section pp-scrollable" id="section2"> section 2</div>
<div class="section" id="section3"> section 3</div>
<div class="section" id="section4"> section 4</div>
</div>
<!-- javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="pagePiling.js-master/jquery.pagepiling.min.js"></script>
</body>
</html>
htmlファイル内に、cssファイルであるjquery.pagepiling.cssとjsファイルであるjquery.pagepiling.min.jsを記述しておく。ajaxのsrcもお忘れなく！
親divのpagePhiling内の各section内に内容を記述する。記述が長い場合は、classでpp-scrollableと記述すればOK!
js
<script>
$(function() {
$('#pagepiling').pagepiling({
menu: '#nav',
sectionSelector: '.section',
sectionsColor: ['#fff', '#eee', '#ddd', '#ccc'],
anchors: ['page1', 'page2', 'page3', 'page4'],
navigation: {
'textColor': '#000',
'bulletsColor': '#000',
'position': 'right',
'tooltips': ['page1', 'page2', 'page3', 'page4']
},
});
});
</script>
jsは上記の記述で機能します。ちなみに、navigationは、ページの右側にスクロールした際の案内が表示されます。
css
問題はスタイルです。nav要素のスタイルや各sectionのz-indexなどをお好みのスタイルに調整すればいい感じになるはずです。
追記
スクロールするページを増やしたい時は、htmlファイル上でdivのsection要素と、jsのanchorsとtooltipsのpageを追加する。
後記
いかがでしたでしょうか？工夫次第でおしゃれでいい感じのウェブページが作れるはずです♪ぜひ、実装してみてください！