ScrollMagic - 全视频背景视差滚动文本

问题描述：

这是关于ScrollMagic（基本）第湿巾 - 手动。我使用上面的视频背景 - 我希望部分（文本，空白背景）向上滚动，并以与他们在示例中相同的方式进入视图，并且这可以正常工作。但是，当用户再次向下滚动时，我需要将文本向上滚动 - 这很简单，但我一直在使用ScrollMagic。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>

你需要出示你尝试过什么。 SO不是在这里给你一个教程或者写代码。 – Rob

@Rob我已经添加了我的代码 - 您提出了一个有效的观点。 – CharlotteOswald

答

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

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

的triggerHook以前 'onLeave'

ScrollMagic - 全视频背景视差滚动文本

相关推荐