【pagePiling.js】Webサイトを構築するときに最適なjQuery

スポンサーリンク
HTML・JavaScript..

こんにちは、ハル@haru_elpisです。

jQueryで各セクションを画面いっぱいに表示でき、スクロールでコンテンツを切り替えていくようなページが作れてしまう「pagePiling.js」の紹介です。

pagePiling.js

ダウンロード

 

pagePiling.js plugin | Create a stack of scrolling pages
pagePiling.js plugin by Alvaro Trigo. Create a stack of scrolling pages.

 

ダウンロードした「jquery.pagepiling.css」・「jquery.pagepiling.min.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

<link rel="stylesheet" href="jquery.pagepiling.css">
<script src="js/jquery.pagepiling.min.js"></script>

HTML

<div id="pagepiling">
    <section class="section" id="section">
        〜内容〜
    </section>
</div>

<nav>
    <ul id="nav">
        <li data-menuanchor="page1" class="active"><a href="#page1">Page1</a></li>
        <li data-menuanchor="page2"><a href="#page2">Page2</a></li>
    </ul>
</nav>

javascript

<script>
$(function() {
    $('#pagepiling').pagepiling({
        menu: '#nav',
        sectionSelector: '.section',
        sectionsColor: ['#fff', '#eee'],
        anchors: ['page1', 'page2'],
        navigation: {
            'textColor': '#000',
            'bulletsColor': '#000',
            'position': 'right',
            'tooltips': ['page1', 'page2']
        },
    });
});
</script>

オプション

menu  メニューにしたい部分のidを入れる

sectionSelector 各セクションの共通のクラスを入れる

sectionColor  各セクションの背景色

上記などがあります。

コメント

タイトルとURLをコピーしました