私は最近、この Web サイトhttp://www.smartusa.com/に出会いました。 これには、素晴らしいスクロール効果と要素のスムーズなスケーリングがあります。
スムーズなスケーリング効果を達成するために使用されるロジックを理解するのを手伝ってくれる人はいますか? パララックスのスクロールではなく、車のスケーリングです。
プラグインを試しjQuery.Transition.jsてスクロールイベントを追加しましたが、変換がかなり不安定です。上記のサイトの効果ほど滑らかではありません。キューイングを停止し、期間を 10 ミリ秒に短縮しましたが、それでも十分ではありません。
どんな助けでも大歓迎です。
TransformJS を試すこともできます。これは、ハードウェアが利用可能な場合にアニメーションを高速化するハードウェアをブラウザーに強制するために、CSS3 3D Transforms を使用します (1 つまたは 2 つの次元のみをアニメーション化する場合でも)。
http://transformjs.strobeapp.com/
また、jQuery にもうまく統合されます。
これが使用しているプラグインかどうかわからない: https://github.com/heygrady/transform/wiki
しかし、そのようなアニメーション ライブラリを使用すると、次のようになります。
$(window).scroll(function(e){ $('.example').transform({rotate: e.scrollTop }); });