0

私はScrollmagicで遊んでいて、いくつかのことをうまく機能させることができました。私が今やろうとしているのは、ビューポートの下部にブログ用の粘着性のあるソーシャル共有バーを作成することです。コードに表示させるのに問題はありませんでした

// Sticky Share Bar
    var stickyShareAnimation = TweenMax.fromTo(shareBar, 0.5, 
      { bottom:-50}, 
      { bottom:0 }

);

var share = new ScrollMagic.Scene({
      triggerElement: '.entry',
      offset:60,
    })
    .setTween(stickyShareAnimation)
    .setPin('.share-bar')
    .addIndicators()
    .addTo(controller)

これはHTMLです

<section class="share-bar">
        <div id="share-container" class="container">
            <div class="row">
                <div class="col-md-12">This is the content</div>
            </div>
        </div>
    </section>
    <section class="blog-content">
        <div class="container">
            <div class="row">
                <article class="single-post">
                    <div class="entry">
                        <?php the_content();?>
                    </div>
                </article>
            </div>
        </div>
    </section>
    <section class="Test">
    Where I want sharebar to tweenout.
    </section>

「セクション テスト」を対象とする別の Tweenmax アニメーションを使用して共有バーをフェードアウトできることはわかっていますが、最初の JavaScript でこれを行うには、おそらくもっと良い方法があると考えました。別の方法はありますか、またはコンテンツ (div.entry) の終了後に共有バーを非表示にするために別の Tween を作成する必要がありますか。

Codepen http://codepen.io/anon/pen/aOWBQZ

4

1 に答える 1

2

スクロール バウンド アニメーション (シーンの長さ > 0) が必要な場合は、はい、ヘッダーをアニメーション化するためのシーンを 1 つ作成し、それを再びアニメーション化するためのシーンを 1 つ作成する必要があります。

ScrollMagic の setTween メソッドを使用して、アニメーションをトリガーし、同じプロパティ (つまり、フェードインおよびフェードアウト時の不透明度) をアニメーション化する場合、プロパティの上書きに関連する問題が発生します。

詳細については、https ://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another を参照してください。

注: wiki は ScrollMagic 1.3 用に作成されましたが、同じ原則が適用されます。

推奨される解決策は次のとおりです (ScrollMagic 2.x 用に更新): http://jsfiddle.net/xk22Lx50/

ただし、より簡単な解決策は、CSS クラスを定義し、setClassToggleそれを一定期間追加または削除するために使用することです。アニメーションは、CSS アニメーションを使用して実現できます。参照: http://scrollmagic.io/examples/basic/class_toggles.html

そしてもう1つ：固定された要素が常に固定され（例のように）、アニメーション化するだけで、DOMフローの一部ではない場合、それを固定する理由はありません（つまり、ScrollMagicの固定機能を使用する） . css に
設定するだけで完了です。position: fixed

ScrollMagic を使用してアニメーションを出し入れできますが、(不要な) JS コードは少なくなります。

于 2015-06-10T12:34:00.057 に答える