画像を使った視差アニメーションを簡単なjQueryのコードで実装するTips

マウスの動きに応じて重ねた複数の画像 が動きその動きを使って視差効果を与える、 というjQueryプラグイン。ユニークでいいで すね。ソースも軽量です。こういうの実装され てるだけで、ちょっと味のあるデザインに なりますよね。 視差アニメーション用のjQueryプラグインは今までもいくつかありましたけど、今回使用されてるものは割と簡単なコードだったので勉強にもなると思いメモ。 PLAX マウスの動きに合わせて重ねられた画像がそれぞれ別の動きをするので結果的に視差効果が生じる、というもの。よくあるやつですね。Githubの404ページのアニメーションで使われてるスクリプトみたいです。 デモ (function($){ var layers = [], docWidth = $(window).width(), docHeight = $(window).height() $(window).

[jed_lee]

あぁこれは。 提案とかに使うとクライアントはスゲェ喜びそう。 グリグリ動いて楽し気だし、覚えておこう。

[misaquo]

これは使えそう。

[ys0000]

簡易アニメーション。面白い。

[hr07jp]

jQuery視差アニメーション-PLEX

[site159]

パララックス

[Donca]

✔ 画像を使った視差アニメーションを簡単なjQueryのコードで実装するTips