jQuery

jQuery 視差効果(パララックス)をしながら水平にスクロールする jInvertScrol プラグイン使い方

jinvertscrol

今回は、視差効果(パララックス)を使いながら水平スクロールが出来る、jQueryプラグイン【jInvertScrol】のご紹介です。
実装はとても簡単でなおかつ軽量のスクリプトとなっております。
下記にデモサイトもありますので、ご参考下さい。

動作デモサイト

実装には、下記URLより必要ファイルをダウンロードして下さい。

jInvertScrol ダウンロード

jInvertScrol 使い方

それでは、jInvertScrolの実装方法を説明していきます。
今回は、2つの背景画像を視差効果をつけながら水平にスクロールすることを前提としたご説明をしていきます。

必要ファイルの読み込み

まずは、head内にjQuery本体とダウンロードしたファイルの中にあるjquery.jInvertScroll.jsファイルを読み込みます。 ファイルの階層などは、ご自身の階層に合わせて下さい。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script type="text/javascript" src="jquery.jInvertScroll.js"></script>

Script

視差効果(パララックス)を付けたい要素名を指定します。
複数の指定も可能です。

     <script type="text/javascript">
        (function($) {
        $.jInvertScroll(['.scroll'], 
            {
            height: 6000,
        	});
   		}(jQuery));
    </script>

HTML

次にHTMLの準備をしていきたいと思います。
HTML側はとても簡単で先ほど指定した要素名を必ず指定しときます。

<body>

    <div class="horizon scroll">
        <img src="images/horizon.png" alt="" />
    </div>
    
    <div class="middle scroll">
        <img src="images/middle.png" alt="" />
    </div>
    
</body>

CSS

CSSは、ダウンロードしたファイルのCSSを利用しても大丈夫です。
ここでは、最低限必要なスタイルを記載します。
.horizonと.middliの幅は、視差効果を出す画像のサイズ等に合わせて下さい。(あまり画像の幅が狭いと分かりにくいかもしれません。)

.scroll
{
  position: fixed;
  bottom: 0;
  left: 0;
}
.horizon
{
  z-index: 1;
  width: 3000px;
}

.middle
{
  z-index: 500;
  width: 4000px;
}

上記のコードまでで実装は完了となります。
実装も特に難しいところもなくすんなり水平スクロールの視差効果が出来ると思います。
普通のサイトには、あまり不向きなjQueryプラグインですが、ランディングページ・特設サイト・何かのイベント告知などでは効果を発揮するjQueryプラグインではないでしょうか。
視差効果でページに奥行き感も出せて少し違ったページを作成出来ると思います。

デモサイトもありますので、ご参考下さい。

動作デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS photo-pin

ブログのアイキャッチ画像に困ったら無料写真素材検索サイト PHOTO PINを使ってみよう

NEXT hunterxhunter

HUNTER×HUNTER バトルオールスターズ VS.ラモット&ユンジュ(上級)を攻略したパーティメンバー