javascript - カーソルの動きに反応する背景スプライト

Question

マウスカーソルの移動方向に応じて、画像スプライトを特定の方向に移動する効果を作成しようとしています。視差スクロールを調べましたが、あまり助けが見つかりませんでした。カーソルの動きに関連するオブジェクトに関する詳細情報やチュートリアルをどこで見つけることができるかについてのアイデアはありますか?

私が話していることをよりよく理解するには、http://web-features.net/にアクセスして、マウスの動きに反応する新しいレイヤーを作成してください。

ありがとう

score 0 · Accepted Answer

チュートリアルについては知りませんが、この投稿への回答を確認してください。

これで始められます。要素を回転する代わりに、背景の位置を変更できます。

基本的に、斜辺の一方の端が要素の中心で、もう一方の端がカーソルである直角三角形を想像してください。

javascripts Math.atan2() を使用すると、y、x 位置を渡すことができ、ラジアンで角度を返します。

これはあなたを動かすのに十分な情報ですか？

///////// アップデート /////////

css3トランジションを使用して作成したデモを次に示します: http://codepen.io/jeffpowersd/pen/ryBJz

score -1 · Accepted Answer

これは私を助けました！

お役に立てれば！

また、画像スプライト上を右に移動する場合、css の方向は負になることに注意してください。例えば、

#prev{background:url('img_navsprites_hover.gif') -47px 0;}

#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

ホバーすると、画像は右に 47 ピクセル、下に 45 ピクセル移動します。

3 に答える 3