Question

我一直在玩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动画来淡出共享栏，目标是＆＃34;部分测试＆＃34;但我认为最初的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的引脚功能）。
只需在css中将其设置为position: fixed，即可完成。

您仍然可以使用ScrollMagic对其进行动画处理，但使用较少（不必要的）JS代码。

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

1 个答案: