先日弊社TAMサイトをリニューアルしましたが、ご覧いただけましたでしょうか？

サイトリニューアルにあたり404ページでTAMくんの顔をマウスの動きに合わせて動かすというものを作ったので、今回はそれを紹介したいと思います。

デモを見る

Parallax.js

使用したのはjQueryプラグインでもある「parallax.js」。
パララックスというと少し古い感じもしますが、これはカーソルを動かす（スマホだと傾ける）ことで要素に奥行き感を出すことができるので、ちょっとしたアクセントとして使うのもオススメです。

公式サイト
http://matthew.wagerfield.com/parallax/
github
https://github.com/wagerfield/parallax/

実装

SVG

キャラクターをSVGで用意し、ソースを見て動かしたいパーツの位置（今回は目、鼻、口）を確認します。
それらをタグで囲いid名をつけたら、あとはパーツ毎に同じレイヤー名をつけ data-depthに奥行きの深さを指定していきます。ここの数値が大きいほど動きも激しくなりますので、少しづつ数値を変えてやると動きに幅がでて面白い表現にすることができます。

 <g id="error404-tamkun-wrap">
      <!-- 左白目 -->
      <path fill="#FFFFFF" class="layer" data-depth="0.8" d="M103.021,130.133c-2.445,25.075-18.707,44.02-36.31,42.307c-17.604-1.727-29.88-23.464-27.429-48.539
  c2.459-25.102,18.721-44.033,36.317-42.32C93.203,83.307,105.48,105.044,103.021,130.133z"/>
      <!-- 右白目 -->
      <path fill="#FFFFFF" class="layer" data-depth="1.0" d="M164.373,127.525c1.365,25.15-11.83,46.353-29.483,47.311c-17.665,0.968-33.102-18.66-34.473-43.811
  c-1.378-25.188,11.823-46.379,29.482-47.334C147.559,82.723,162.988,102.349,164.373,127.525z"/>
      <!-- 右黒目 -->
      <path class="layer" data-depth="2.0" fill="#CF4C51" d="M151.481,123.292c0.899,16.348-7.071,30.078-17.784,30.676c-10.713,0.582-20.147-12.203-21.04-28.564
  c-0.896-16.351,7.075-30.08,17.782-30.663C141.165,94.156,150.58,106.941,151.481,123.292z"/>
      <!-- 左黒目 -->
      <path fill="#CF4C51" class="layer" data-depth="2.2" d="M92.05,126.904c-1.628,16.301-11.707,28.663-22.514,27.633c-10.818-1.042-18.28-15.106-16.654-31.407
  c1.62-16.298,11.708-28.663,22.526-27.621C86.215,96.539,93.663,110.605,92.05,126.904z"/>
      <!-- 鼻 -->
      <path fill="#FF4442" class="layer" data-depth="2.0" d="M104.333,163.476c0,1.863-1.391,3.377-3.109,3.377c-1.715,0-3.11-1.514-3.11-3.377
  c0-1.874,1.396-3.388,3.11-3.388C102.942,160.088,104.333,161.602,104.333,163.476z"/>
      <!-- 口 -->
      <path fill="#FF6D6D" class="layer" data-depth="1.0" d="M106.412,198.235c-9.782-1.812-25.895-3.439-34.014,3.252c-4.061,3.354-7.382,8.02-3.539,13.221
  c3.991,5.413,12.141,3.314,17.672,2.634c5.704-0.71,9.154-0.809,14.673,1.712c4.314,1.962,9.392,6.232,14.791,4.369
  c10.677-3.686,8.728-13.718,2.732-19.342C114.805,200.284,106.412,198.235,106.412,198.235z"/>
</g>

JS

「jquery.js」とダウンロードした「jquery.parallax.js」を読み込ませたら、あとは下記のように記入して、動きを細かく調整していきましょう。
　

window.onload = function() {
  new Parallax($('#error404-tamkun-wrap')[0], {
    scalarX: -4,　// X方向の移動幅
    scalarY: -3,　// Y方向の移動幅
    frictionX: 0.2,　//X軸の移動スピード（数値が大きいほど早く動く）
    frictionY: 0.2,　//Y軸の移動スピード（数値が大きいほど早く動く）
  });
};

以上で完成です。
工夫次第で面白いアニメーションが簡単に作れそうですね。ぜひ試してみてください！