javascript - Scrollmagic 在 div 条目上显示和删除 Pin

Question

我一直在使用 Scrollmagic 并成功地完成了一些工作。我现在想做的是在视口(viewport)底部为我的博客创建一个粘性社交共享栏。我在设法让它与我的代码一起显示方面没有遇到任何问题

// 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 来做到这一点。是否有其他方法或者我需要创建一个单独的 Tween 以便共享栏在内容 (div.entry) 完成后隐藏。

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

Answer 1

如果您想要滚动动画(场景持续时间 > 0)，那么是的，您应该创建一个用于为标题添加动画的场景和一个用于再次为其添加动画的场景。

如果您想使用 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

还有一件事: 如果您的固定元素始终被固定(如您的示例中所示)并且只是动画进出，但从来不是 DOM 流的一部分，则没有理由将其设置为粘性(即使用 ScrollMagic 的 pin 功能)。
只需在 css 中将其设置为 position:fixed 即可完成。

您仍然可以使用 ScrollMagic 对其进行动画进出，但需要更少的(不必要的)JS 代码。