Loading...

htmlコーディング 小棹制作所

この記事がよく読まれてます

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (34,900Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (17,470Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (15,550Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,477Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (15,421Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (15,128Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (15,110Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,513Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (10,882Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (10,466Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,368Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,298Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (9,603Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,388Views)
  • 翻訳機能をWebサイトに埋め込む方法 (9,128Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,896Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,834Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,594Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (5,289Views)
  • TwitterBootstrapでも採用されている、たぶんもっとも簡単なレスポンシブ対応テーブルの作り方 (5,231Views)
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン

    2014年07月14日(月)
    34900Views

    この記事は執筆から1年以上経過しており、情報が古い可能性があります。

    いろいろなWebサイトで見られるようになった、縦長スクロール+アニメーションなWebページ。
    fullPage.jsはそんな仕組みを実装するのに役立つjQueryプラグインのひとつです。

    fullPage.jsとは

    fullPage.jsは、マウススクロールで、ツルッと1ページ分まるごと画面がスクロールする仕組みを作れるjQueryプラグインです。

    文章ではわかりづらいと思いますので、デモを御覧ください。
    fullPagejsデモ iphone買ったんです

    こんなかっこいいWebページにも使われてます。

    上記のデモはとてもシンプルなものですが、他のアニメーション系プラグインと組み合わせたりで、すごくかっこいいWebページを作ることもできます。

    使用例

    Sony_MDR_Headphones

    fullPagejsの使い方

    シンプルに使うなら、設定は単純です。

    fullPagejs必要ファイル一式をまるごとダウンロード

    ダウンロードは下記から
    alvarotrigo/fullPage.js · GitHub

    alvarotrigo_fullPage_js_·_GitHub

    htmlファイルに読み込ませる

    ダウンロードしたファイルのうち、htmlファイルに読み込むのが、下記の2つ。

    jquery.fullPage.css
    jquery.fullPage.js

    jQueryプラグインなので、これに加えて、jQuery本体の読み込みを忘れずに。

    <link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.fullPage.js"></script>
    

    最低限の機能実装に必要なファイル読み込みは上記の3つでオッケーです。
    jQuery本体ファイルとjquery.fullPage.jsの読み込み順番を間違えると動きませんので、ご注意ください。

    fullPage.jsの機能(function)呼び出し

    下記のコードをhtmlファイルのhead内に記述することによって、fullPage.jsが動くようになります。

    <script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage();
    });
    </script>
    

    htmlの記述方法

    続いて、実際のブラウザに表示される部分の記述を見ていきます。
    具体的には下記のようにhtmlを記述します。

    <div id="fullpage">
        <div class="section">Some section</div>
        <div class="section">Some section</div>
        <div class="section">Some section</div>
        <div class="section">Some section</div>
    </div>
    

    sectionというクラス名で囲ったdivが一コマ分にあたります。
    この“section”内に、画像やテキストを配置します。

    fullPage.jsの基本機能の実装に必要な設定は以上です。

    横スクロールを作る

    横スクロールを作るには、下記のように記述します。

    
    <div class="section">
        <div class="slide"> Slide 1 </div>
        <div class="slide"> Slide 2 </div>
        <div class="slide"> Slide 3 </div>
        <div class="slide"> Slide 4 </div>
    </div>
    

    “section”のdivのなかに、slideというクラス名のdivを作っています。

    背景色などのオプションを変更する方法

    fullPagejsの諸々の設定は「プラグイン機能(function)の呼び出し」の項で出てきたfunction内でいじることができます。

    たとえば、背景色の設定はこんなかんじで。

    $('#fullpage').fullpage({
        sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
    });
    

    こうすると、1コマ目の背景色が#f2f2f2、2コマ目が#4BBFC3、となります。

    fullPagejsには、このような設定オプションが多数用意されており、設定ごとにカンマで区切ることで、複数の設定を記述します。

    記述例

    $(document).ready(function() {
        $('#fullpage').fullpage({
            verticalCentered: true,
            resize : true,
            sectionsColor : ['#ccc', '#fff'],
            anchors:['firstSlide', 'secondSlide'],
            scrollingSpeed: 700,
            easing: 'easeInQuart',
            menu: false,
            navigation: false,
            navigationPosition: 'right',
            navigationTooltips: ['firstSlide', 'secondSlide'],
            slidesNavigation: true,
            slidesNavPosition: 'bottom',
            loopBottom: false,
            loopTop: false,
            loopHorizontal: true,
            autoScrolling: true,
            scrollOverflow: false,
            css3: false,
            paddingTop: '3em',
            paddingBottom: '10px',
            normalScrollElements: '#element1, .element2',
            normalScrollElementTouchThreshold: 5,
            keyboardScrolling: true,
            touchSensitivity: 15,
            continuousVertical: false,
            animateAnchor: true,
            sectionSelector: '.section',
            slideSelector: '.slide',
    
            //events
            onLeave: function(index, nextIndex, direction){},
            afterLoad: function(anchorLink, index){},
            afterRender: function(){},
            afterResize: function(){},
            afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
            onSlideLeave: function(anchorLink, index, slideIndex, direction){}
        });
    });
    

    オプション解説

    fullPage.jsで使う頻度が多そうな設定オプションをいくつか下記します。

    オプション
    指定なし時の設定
    解説
    verticalCentered
    true
    section内で、コンテンツを垂直方向に中央揃えに配置します
    resize
    true
    ブラウザの画面幅が変わった時にテキストサイズも変更するかどうか
    scrollingSpeed
    700
    スクロールスピードをミリ秒単位で設定します
    sectionsColor
    none
    背景色を選べます

    設定方法はこちらのOptionsを参照してくださいalvarotrigo/fullPage.js · GitHub
    loopTop
    false
    1コマ目から上方法にスクロールした時に、最後のページへ移動(ループ)させるか
    loopBottom
    false
    最後のコマからした方法へスクロースした時に、最初のページへ移動(ループ)させるか
    loopHorizontal
    true
    横方法のスライダーを作成した際、コマをループさせるか
    paddingTop
    0
    上部のパディングを通常のCSSとおなじように指定できます
    上部に固定ナビゲーションを配置したデザインで使います
    paddingBottom
    0
    paddingTopと同じく、した方向のパディングを設定します

    すべてのオプションは下記公式githubページを参照ください。
    alvarotrigo/fullPage.js · GitHub

    まとめ

    単体でも、他のアニメーション系プラグインと合わせて使ってもなかなか面白いことができそうなjQueryプラグイン、fullPage.jsの紹介でした。

    おわりに

    この記事はあなたのお役にたてましたか?
    もしよろしければ・・・

    この記事をみんなに教える?


    筆者に何か教える?

    たとえば、 小棹制作所はこんなこと↓を知りたがっているようです。

    feedlyでブログを購読する?

    follow us in feedly

    筆者にメーッセージを送る?

    なんでもご自由に書いて送ってください。
    ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

    チェックを入れて送信してください

    Copyright (C) 2012 小棹制作所.
    All rights reserved.