JavaScript/CSS 画像ホバーアニメーション
ココナラでブログの投稿機能が実装されたので、これから技術記事等を書き記して行こうと思います。まず第一弾として、最近いろんなサイトで見かける「マウスホバーすると画像が傾く」アニメーションを実装しました。このアニメーション、比較的シンプルなJavaScriptの記述で実装可能で、クラス名を変えるだけで他のWebページにも適用出来るので使いまわしも効いてとてもコスパの良い実装だと思います。たくさんの画像が並ぶサイトに実装するのは、目についてイマイチだと思いますが、少ない画像でインパクトを与えるにはとても効果のあるアニメーションだと感じます。サイトにゆったりとした印象をもたせたい場合などに最適ではないでしょうか?ソースコードを以下に掲載致しますので、ぜひご活用くださいm(_ _)m``` TweenMax.set($('.project'), { rotationY: 0, rotationX: 0, rotationZ: 0, transformPerspective: 1000 });
$('.project').mouseover(function () {
$('.project').mousemove(function (e) {
var x = e.pageX - $(this).offset().left,
y = e.pageY - $(this).offset().top;
var px = x / $(this).width(), py = y / $(t
0