プロモーションサイトの単純な視差効果

1ページのみで構成される最後のプロジェクトでは、単純な効果を実装する必要がありました。その本質は、例#1および#2を使用してよりよく理解されます。



実装に十分な時間があり、長い間、少なくとも他の開発者を助けることができる何かを書きたいという要望がありました。 jqueryの非常に小さくてシンプルなプラグインでこの全体を設計しました。 私と私の猫ボリスがこのコードを読むことができるようになることを願っていますが、それが誰かを助けるなら、あなたのプロジェクトでそれを使用したり、コピー編集を変更したりすることを気にしません。



設定





ratioH-水平マウス修飾子

ratioV-垂直マウス修飾子

反転 -XとYを交換します(マウスの水平方向の移動はオブジェクトの垂直位置を変更し、その逆も同様です)

invertH-マウスの水平方向の動きを反転させる

invertV-マウスの動きを垂直に反転



設定はスクリプトの初期化中に設定され、任意の組み合わせで組み合わせることができます。



必要に応じて、このすべてに.css()の代わりに.animate()を添付したり、通常のブラウザーのトランジションを追加することもできますが、そのような実装で十分です。 オブジェクトや他のグッズのサイズを変更して、本格的な視差を実装する計画。



ここからダウンロード

批判は広く歓迎され、推奨事項は受け入れられ考慮されます。



UPD:もう1つの例を追加しました。明らかに最初の例は、私がやりたいことの本質を責めるものではなかったようです。



All Articles