ScrollMagic - 全視頻背景視差滾動文本

-1

這是關於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>

來源

2017-08-05 CharlotteOswald

你需要出示你嘗試過什麼。 SO不是在這裏給你一個教程或者寫代碼。 – Rob

@Rob我已經添加了我的代碼 - 您提出了一個有效的觀點。 – CharlotteOswald

通過ScrollMagic演示搜索後 - 我找到了我的答案。我不得不改變觸發事件 - 請查看下面編輯的代碼，這是主頁上的腳本Scrollmagic的第一部分。

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

的triggerHook以前 'onLeave'

來源

2017-08-05 15:52:44 CharlotteOswald

ScrollMagic - 全視頻背景視差滾動文本

回答

相關問題