タグ

2017年4月28日のブックマーク (1件)

  • SVGのキャラクターを parallax.js で動かしてみる | Tips Note by TAM

    先日弊社TAMサイトをリニューアルしましたが、ご覧いただけましたでしょうか? サイトリニューアルにあたり404ページでTAMくんの顔をマウスの動きに合わせて動かすというものを作ったので、今回はそれを紹介したいと思います。 デモを見る Parallax.js 使用したのはjQueryプラグインでもある「parallax.js」。 パララックスというと少し古い感じもしますが、これはカーソルを動かす(スマホだと傾ける)ことで要素に奥行き感を出すことができるので、ちょっとしたアクセントとして使うのもオススメです。 公式サイト http://matthew.wagerfield.com/parallax/ github https://github.com/wagerfield/parallax/ 実装 キャラクターをSVGで用意し、ソースを見て動かしたいパーツの位置(今回は目、鼻、口)を確認します

    SVGのキャラクターを parallax.js で動かしてみる | Tips Note by TAM
    maritimecolor
    maritimecolor 2017/04/28
    すごい。