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 / $(this).height();

            var xx = -10 + (20 * px), yy = 10 - (20 * py);

            TweenMax.to($(this), 0.5, { rotationY: xx, rotationX: yy, rotationZ: 0, transformPerspective: 1000, ease: Quad.easeOut });

        });

    }).mouseout(function () {

        $(this).unbind('mousemove');

        TweenMax.to($(this), 0.5, { rotationY: 0, rotationX: 0, rotationZ: 0, transformPerspective: 1000, ease: Quad.easeOut });

    });

```

---

マウスホバー時に動かしたい要素のクラスに[project]というクラスを付与すれば動きますし、上記の関数のクラス名指定部分を任意のものに変えて頂いても問題なく動きます^-^

TweenMaxとjQueryの使用を前提としてますので、

その点ご注意下さいませm(_ _)m

---

HTML/CSS/JavaScriptコーディングについてのご依頼はこちらからお気軽にご相談下さい！

WebサイトリニューアルやWordPressの実装等も出来ますので、

軽微なものから本格的な案件までお待ちしております！