fullPage_jsプラグインのデモページ

【jQuery】スクロール系プラグインはこれだけで十分ではないか?fullPage.js

2014.10.17   12500


背景スクロール系のプラグインは色々ありますが、このfullPage.jsは何と言ってもすごいのが出来ることの種類が多いこと。
どのプラグインを使ったら良いか悩んだらとりあえずこれを使っておけば幅広く使えそう。


 

fullPage.jsのオススメ/ポイント

  •   何と言っても種類が豊富で紹介しきれないほど!是非ダウンロードしてexampleを見て欲しい!
  •   縦だけではなく横にも移動できる。そして動画も!
  •   Appleのデモに興奮する!

fullPage.jsのデモ


fullPage.jsのページ


fullPage.jsの使い方

それではfullPage.jsの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<ul id="menu" style="text-align:left;">
    <li data-menuanchor="1page" class="active"><a href="#1page">First slide</a></li>
    <li data-menuanchor="2page"><a href="#2page">Second slide</a></li>
    <li data-menuanchor="3page"><a href="#3page">Third slide</a></li>
    <li data-menuanchor="4page"><a href="#4page">Third slide</a></li>
</ul>
<div id="fullpage">
    <div class="section active" id="section0"><h1>fullPage.jsのデモ</div>
    <div class="section" id="section1">
        <div class="slide "><h1>シンプルデモ</h1></div>
        <div class="slide active"><h1>矢印をクリックで横にスライド出来るよ</h1></div>
        <div class="slide"><h1>もっと横に移動できるよ</h1></div>
        <div class="slide"><h1>元に戻るよ</h1></div>
    </div>
    <div class="section" id="section2"><h1>もう一回下に移動しよう</h1></div>
    <div class="section" id="section3"><h1>シンプルデモ終わり</h1></div>
</div>

CSSコード

<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
<style>
/* デモ調整用 */
.section{
    text-align:center;
    font-size:150%
}
/* 上部内部リンクメニューデザイン */
#menu li {
    display:inline-block;
    margin: 10px;
    color: #000;
    background:#fff;
    background: rgba(255,255,255, 0.5);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#menu li.active{
    background:#666;
    background: rgba(0,0,0, 0.5);
    color: #fff;
}
#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: #fff;
}
#menu{
    position:fixed;
    top:0;
    left:0;
    height: 40px;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin:0;
}
</style>

JavaScriptコード

<!-- jQuery本体 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- jQuery UI 本体 -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="../jquery.fullPage.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
            menu: '#menu',
            anchors: ['1page', '2page', '3page','4page'],
            sectionsColor: ['#AACF52', '#4BBFC3', '#7BAABE', '#E5E5E5']
        });
    });
</script>

チェックポイント

デモでは一番シンプルな形で紹介しましたが、このfullPage.jsプラグインはたくさんのオプションがありますので、是非こちらのGitHubページのUsageを参考に色々試してみてください。

あともう一点。是非こちらのAppleのデモを見てみて下さい。 かっこ良くないですか? これもこのfullPage.jsで作られています。
ちなみに背景を動画にも出来ます。一度ダウンロードしてデモを見てみると色々あって本当にオススメです。

プラグインへ一言

本当に種類が豊富でオススメ

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております