問題タブ [scrollmagic]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - translate / tween 要素 (可能であれば、ユーザーのスクロールに応じて 2 つのクラス間)
ユーザーがスクロールするときに要素を翻訳しようとしています。
可能であれば、上にスクロールしてクラスに移動し、下にスクロールしてクラスから移動します。
このデモでは、魔法の杖がスクロールダウンでこれを行うので、これは可能だと思います: http://janpaepke.github.io/ScrollMagic/
しかし、このスクリプトの使い方がわかりません ( https://github.com/janpaepke/ScrollMagic )
ユーザーが上下にスクロールしているかどうかを示すコードは次のとおりです。
jquery - スクロールマジック トゥイーン アニメーション
以前は superscrollorama を使用していましたが、scrollmagic を使い始めましたが、いくつかの div を適切にアニメーション化することができません。最初の 2 つの div は問題ありませんが、下にスクロールすると最後の 2 つがアニメーションしません。また、2 番目の div に少しオフセットを追加したいのですが、方法がわかりません。構文が Superscrollorama とは少し異なります。
javascript - パララックス ScrollMagic サイト内でのリンクの使用
サイト内にリンクするための上部にナビゲーション メニューを含む ScrollMagic を使用して、縦方向のパララックス スクロール サイトを作成しています。
スクロールに視差アニメーションが適用されていない場合、メニュー自体は正しく機能しますが、視差が追加されると (つまり、2 番目のセクションがイントロ セクションの上に移動します)、セクションに移動するときに全体の高さの減少を考慮することができないようです。 、オーバーシュートします。
ここにいくつかのコードがあります:
このような移動 (視差) セクションに対処する戦略を持っている人はいますか?
ありがとう
jquery - EMでFontSizeをアニメーション化するScrollMagic
サイトで ScrollMagic を使用していますが、フォント サイズをピクセルではなくemでアニメーション化しようとすると問題が発生します。
したがって、これはemsの例です: http://jsfiddle.net/41h1nfxo/7/
そして、これはpxを使用した別のものです: http://jsfiddle.net/jtdm0o6q/2/
ご覧のとおり、2 つ目はうまく機能します。
このバグの原因がわかりません。皆さんが私を助けてくれることを願っています! ありがとうございました
HTML
脚本