ScrollMagic - スクロールした視差のテキストを含むフルビデオの背景

Question

これはScrollMagic（Basic）セクションワイプに関するマニュアルです。 （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' 
    } 
}); 

triggerHookが以前いた 'onLeave'