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）完成后隐藏。

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

4

1 回答 1

2

如果您想要滚动动画（场景持续时间> 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 的固定功能） .
只需将其设置为position: fixedcss 即可。

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

于 2015-06-10T12:34:00.057 回答