トップページでトップ絵に採用してみましたが、ドット絵でパララックス効果をやってみました。

パララックス効果とはなんぞや

パララックス(parallax)とは日本語では視差のことで、大雑把に言うと視点が変わることによる物の見え方の違いのことです。

パララックス効果というと、近年おしゃれなWebデザインとして多方面で利用されている、スクロールやマウスの移動などで画像をずらし、その時にずらし方を画像ごとに変えてやることで遠距離感を出す手法を指すようです。 Google検索すると、おしゃれなサイトが沢山出てきます。

今回は、このサイトのトップ絵としてパララックス効果を利用した画像を採用してみました。

デモ

こんな感じで、マウスを動かすと視点を変えたかのような動きをします。

レシピ

画像の用意

今回は以下の様な画像を用意しました。女の子ははじめからトップページ用ということで、僕の嗜好を詰め込んだ結果こんな子になりました。また、パララックス効果を使うことも決めていたので、このようにものがぶちまけられてるような構図にしました。

html

<div id="parallaxImage">
    <div class="bg"       data-z="-600"></div>
    <div class="picture1" data-z="-570"></div>
    <div class="picture2" data-z="-530"></div>
...
</div>

htmlはこんな感じで、パララックスする画像を一つのdivで覆ってあげて、あとはパーツの個数だけ子要素を用意します。また、data-zという属性を指定していますが、これを利用してマウスが動いた時に動き方がそれぞれのパーツで変わるようになっています。詳しくはJavaScriptの説明時にします。

全体は割愛しているので、興味が有る方はこのページのソースを見てください。

css

div#parallaxImage { position: relative; width: 200px; height: 150px; }
div#parallaxImage div { position: absolute; background-image: url("http://manaten.net/wp-content/uploads/2013/05/20120418.gif"); display: block; overflow: hidden; }

div#parallaxImage div.bg { left: 10px; top: 0px; width: 180px; height: 150px; background-position: 0px 0px; z-index: 1; }
div#parallaxImage div.picture1 { left: 20px; top: 10px; width: 40px; height: 40px; background-position: -180px 0px; z-index: 2; }
div#parallaxImage div.picture2 { left: 130px; top: 10px; width: 40px; height: 30px; background-position: -180px -40px; z-index: 3; }
...

cssは、全体の枠に対してposition:relativeと大きさを指定してあげ、各パーツのdivはcssスプライトで対応する画像を表示しつつ、position:absoluteで正しい位置に配置してあげます。今回大変だったのが、22個のパーツに対してcssスプライトと絶対座標を指定してやることでした。 sass使ってなければ死んでいたと思います。 cssスプライトを使わなければかなり楽にはなると思いますので、手軽にやってみたい場合はオススメです。

JavaScript

最後にJavaScriptです。巷ではパララックス効果用のライブラリもあるようですが、今回はjQueryのみ使用しました。

$(function() {
    var baseX = $('#parallaxImage').offset().left + 100;
    var baseY = $('#parallaxImage').offset().top  + 75;
    var layers = $('#parallaxImage').children().map(function(_, layer) {
        return {
            $: $(layer),
            factor:$(layer).data("z")/10000,
            baseX: $(layer).position().left,
            baseY: $(layer).position().top
        };
    });
    $(document.body).mousemove(function(ev) {
        $.each(layers, function(_, layer) {
            var dx = ev.pageX - baseX;
            var dy = ev.pageY - baseY;
            layer.$.css({
                left: layer.baseX + (dx*layer.factor) +"px",
                top:  layer.baseY + (dy*layer.factor) +"px" });
        });
    });
});