問題タブ [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 - jQuery と ScrollMagic を使用したアニメーション タイムラインのスクロール
私が現在持っているもの
jQuery と ScrollMagic (GSAP プラグインを使用) を使用して HTML/CSS/JS スクロール タイムラインを構築しています。ページが下にスクロールするとタイムライン イベントがアニメーション化され、基本的なタイムライン機能が動作しています。
追加したいこと
私の質問は、中央の垂直線からフェードインする各タイムライン イベントに分岐する水平線を実装する最良の方法に関するものです。同じように。
ScrollMagic にSVG を描画する機能があることは知っていますが、より効率的な方法があるかどうかはわかりません。たとえば、おそらく HTML5 キャンバスまたは単純な画像を使用する方が、このアプリケーションには適しているでしょう。ページの応答性を維持することを目指しているので、それは考慮すべきことです。
このトピックに関するアドバイスやデモンストレーションは大歓迎です。
ScrollMagic と GSAP を利用した現在の「イベント アニメーション」の例。タイムラインには、毎年このようなコード ブロックがあります。これは、水平線のアニメーションが追加される可能性が最も高い場所です。
internet-explorer - IE および EDGE で ScrollMagic を使用して SVG を描画する際の問題
ライブラリ ScrollMagic で SVG を描画するときに問題が発生します: github.com/janpaepke/ScrollMagic
このリンクhttp://goo.gl/avrW9rで、Google Chrome、Firefox、および Safari で正しく描画された線を確認できます。
問題は Internet Explorer と Microsoft Edge のみです。
この問題を解決するためのアイデアはありますか?
ここで私のコードの例をダウンロードできます: https://goo.gl/qj5FQC
javascript - 競合するライブラリ: Fullpage.js と ScrollMagic の問題
だから私はさまざまなセクションを持つ垂直視差スクロール Web サイトを作成しており、それらの間を移動したいと考えています。そこでScrollMagic、視差とfullpage.jsナビゲーションを選択しました。fullpage.js CSSヘッダーにファイルを含めました。
問題は、両方を持とうとするときです。<body>タグ間の私のコードは
</body>そして一番下で、タグを閉じる直前にjqueryライブラリを宣言します
セクションへのスムーズなスクロールが必要です。多分それを行う他の方法があります。トリガーを必要とする他のアニメーションをScollmagic描いたり実行したりするので、私は間違いなく必要ですSVG's
javascript - GSAP と Webpack で ScrollMagic を使用する方法
ScrollMagic を GSAPで使用するには、animation.gsap.jsプラグインをロードする必要があります。Webpack を使用すると、これを実現するために次のようなことができます (CommonJS 構文を使用し、npm ですべてをインストールしたと仮定します)。
これが実際に機能することを確認するには、Webpack 構成にエイリアスを追加して、Webpack がプラグインの場所を認識できるようにする必要があります。
残念ながら、この構成と上記のような CommonJS 構文を使用している場合、ScrollMagic はエラーをスローし続けます。
jquery - あえぎはサファリで動作しません
なぜこれがサファリでうまくいかないのですか？クロムでうまく機能します。jsスクリプトはFirefoxでも機能しますが、正しい位置に表示されないsvgの問題がいくつかありますが、それは別の問題です...デバッガータブのサファリでこれを取得します:
http://codepen.io/Separator/pen/dGEdeP
以下は、GASPを使用した私のjsコードです