こんにちは。デザインちーむのフモです。

最近よく見かける、マウスと一緒にWebページ背景を動かす jQuery をご紹介します。

まずはサンプルをご覧ください

サンプルページ
※PCで閲覧してください。

マウスと一緒に背景がぐるぐる動くのはなんとも不思議です。
どんな効果で表現しているのか気になっていたのですが、Parallaxの効果で出来るんですね。
「Parallax」で検索するとこの動きをつけるためのコードはたくさん出てくるのですが、まず何という名前のプラグインを使うのかがわからなかったため苦労しました；

それでは、解説に入ります。

解説目次

1. プラグインをダウンロード
2. 画像を用意する
3. HTML
4. CSS
5. jQuery プラグインを呼び込む

プラグインをダウンロード

まずはプラグインを公式サイトからダウンロードします。

jquery.parallax.js

この解説で使用するのは、jquery.parallax.jsとjquery.parallax.cssのみになります。

画像を用意する

サンプルページでは、画像の位置やサイズを少しずつズラしながらレイヤーで重ねて、奥行きを出しています。
というわけで、動きを表示させたい領域の大きさに合わせて画像を数枚用意してください。

サンプルではこのような画像を使いました。

HTML

HTMLのhead内に書き加える

まず、ページのスタイル指定用のstyle.cssと、Parallax用のjquery.parallax.cssを呼び込みます。

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="css/jquery.parallax.css" />

HTMLのbody内に書き加える

下記は画像を入れる部分のみを示しています。

<div class="site_wrap wrap">
    <div id="port">
        <img class="parallax-layer" src="layer1.png" alt="" style="width:1000px; height:700px;"/>
        <img class="parallax-layer" src="layer2.png" alt="" style="width:1100px; height:800px;"/>
        <div id="hud">
            <img src="layer3.png" width="960px">
        </div>
    </div>
</div> 

タグ内の、画像名・パス・画像の大きさは変えてください。

後ろのレイヤーより、前のレイヤーの画像サイズを少しだけ大きくしたり小さくしたりすると動きのスピードに差異が出ます。
それぞれのレイヤーの動くスピードが違っている方が奥行き感は出ますので、ぜひサイズを変えてあげてください。

CSS

style.css

下記は先ほどのサンプルページのcssです。
今回はレイヤー③画像を固定したかったので『#hud』を書き加えています。

/*parallaxの効果を出す部分*/
.site_wrap {
    width: 82%;
    height: 100%;
    max-width: 60rem;
    min-width: 292px;
}
/* レイヤー①②を入れるportの設定 */
#port {
    background: #000;
    margin: 1.5em 0px;
    overflow: hidden;
    position: relative;
    height: 700px;
    z-index:300;
}
/* レイヤー③の設定 */
#hud {
    z-index:500;
    height: 700px;
    overflow:hidden;
    position:absolute;
}

jQuery プラグインを呼び込む

Parallax.jsを動かすためのコード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script src="js/jquery.parallax.js"></script>
<script type="text/javascript">
    
    jQuery(document).ready(function(){
        // Declare parallax on layers
        jQuery('.parallax-layer').parallax({
            mouseport: jQuery("#port")
        });
    });
</script>

bodyタグ内の一番最後に上記を追記してください。

以上、いかがでしたか？

今回は私が用意したサンプルページを元にした解説でしたが、
jQuery ダウンロードファイルに入っている画像やHTMLなどをいじるともっとよくわかるかと思います。

この動きを好きに扱えるようになったら、Webページ上で遊べることが増えそうですね。
画像のサイズが肝となってくるかと思うので、自分でベストな動きを見つけられるまで、色々試してみてください！