上下から画面を二分した要素がスクロールされてくるmultiscroll.jsプラグイン。
言葉では説明しづらいので是非デモを見てみて。
ちょっと変わったページスクロールUIを実装したい方にオススメ。

 

multiscroll.jsプラグインのオススメ/ポイント

multiscroll.jsプラグインのデモ

multiscroll.jsプラグインのページ

multiscroll.jsプラグインの使い方

それではmultiscroll.jsプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<ul id="menu">
    <li data-menuanchor="first"><a href="#first">First slide</a></li>
    <li data-menuanchor="second"><a href="#second">Second slide</a></li>
    <li data-menuanchor="third"><a href="#third">Third slide</a></li>
</ul>

<div id="myContainer">
    <div class="ms-left">
        <div class="ms-section">
            <h1>Left 1</h1>
        </div>
        <div class="ms-section">
            <h1>Left 2 </h1>
        </div>
        <div class="ms-section">
            <h1>Left 3</h1>
        </div>
    </div>
    <div class="ms-right">
        <div class="ms-section">
            <h1>Right 1</h1>
        </div>
        <div class="ms-section">
            <h1>Right 2</h1>
        </div>
        <div class="ms-section">
            <h1>Right 3</h1>
        </div>
    </div>
</div>

CSSコード

<link rel="stylesheet" type="text/css" href="../jquery.multiscroll.css" />
<style>
.ms-section{
    text-align: center;
}
<!-- ページリンクのデザイン [START] -->
#menu li {
    display:inline-block;
    margin: 10px;
    color: #000;
    background:#fff;
    background: rgba(255,255,255, 0.3);
    -webkit-border-radius: 10px;
            border-radius: 10px;
}
#menu li.active{
    background:#666;
    background: rgba(255,255,255, 1);
    color: #000;
}
#menu li a{
    text-decoration:none;
    color: #000;
}
#menu li.active a:hover{
    color: #000;
}
#menu li:hover{
    background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
    padding: 9px 18px;
    display:block;
}
#menu li.active a{
    color: #000;
}
#menu{
    position:fixed;
    top:0;
    left:0;
    height: 40px;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin:0;
}
<!-- ページリンクのデザイン [END] -->
</style>

JavaScriptコード

<!-- jQuery本体 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="../vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="../jquery.multiscroll.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#myContainer').multiscroll({
        sectionsColor: ['#09aa04', '#ffbbbd', '#ffcc00'],  // 各ページの背景色
        anchors: ['first', 'second', 'third'],  // ページ内リンクのID名
        menu: '#menu',  // ページ内リンクのラッパー要素ID
        navigation: true,  // 画面右部のリンクナビゲーション表示
        navigationTooltips: ['One', 'Two', 'Three'], //  画面右部のリンクナビゲーションのツールチップ表示文字列
        loopBottom: true,  // 画面最下部ページからトップに戻す
        loopTop: true  // 画面トップから最下部ページに戻す
    });
});
</script>

チェックポイント

プラグインへ一言

背景

---