Question

这是关于ScrollMagic（基本）部分擦拭 - 手动。（http://scrollmagic.io/examples/basic/section_wipes_natural.html）

我使用了上面的视频背景 - 我希望这些部分（文本，带有空白背景）向上滚动并进入视图，就像它们在示例中一样，这样可以正常工作。但是，当用户再次向下滚动时，我需要将文本向上滚动 - 这很简单，但我一直在努力使用ScrollMagic。

这是我想要实现的一个例子（但更复杂） - www.sbs.com.au/theboat/。

我需要找到一种方法让上一部分向上滚动并在新视图出现时消失。

这是我正在使用的ScrollMagic代码。

 <section class="panel ">
    <b>ONE</b>
 </section>
 <section class="panel ">
    <b>TWO</b>
 </section>
 <section class="panel ">
    <b>THREE</b>
 </section>
 <section class="panel ">
    <b>FOUR</b>
 </section>
 <section class="panel ">
    <b>FIVE</b>
 </section>
                <script>
                    $(function () { // wait for document ready
                        // init
                        var controller = new ScrollMagic.Controller({
                            globalSceneOptions: {
                                triggerHook: 'onLeave'
                            }
                        });

                        // get all slides
                        var slides = document.querySelectorAll("section.panel");

                        // create scene for every slide
                        for (var i=0; i<slides.length; i++) {
                            new ScrollMagic.Scene({
                                    triggerElement: slides[i]
                                })
                                .setPin(slides[i])
                                .addTo(controller);
                        }
                    });
                </script>

Answer 1

在搜索ScrollMagic演示后 - 我找到了答案。我不得不更改触发事件 - 请参阅下面的编辑代码，这是主页上Scrollmagic脚本的第一部分。

 $(function () { // wait for document ready
    // init
    var controller = new ScrollMagic.Controller({
    globalSceneOptions: {
    triggerHook: 'onCenter'
    }
});

触发挂钩以前是“离开＆＃39;

ScrollMagic - 带滚动视差文本的完整视频背景

1 个答案: