ScrollMagic.js - セクションスワイプの後にコンテンツを追加する方法は？

Question

このデモを使用する：私はワイプ最後のセクションの後に追加のコンテンツを追加する方法を把握しようとしている

http://scrollmagic.io/examples/basic/section_wipes_natural.html

。ここに私が達成しようとしていることの大まかな考えがあります。うまくいけばそれは理にかなっています。

コード例が役に立ちます。

主な問題は、最後のwiprセクションがトップに固定されたままであり、それは代わりにその背後に、最上部に移動した後、コンテンツを許可していません。

Answer 1

私はまったく同じことを達成しようとしてきました。私はjsFiddle上の例を発見し、最後の2つのセクションでは、正常に動作していること（以前の内容の重複せずにページをスクロールアップ）ので、それを変更した：

HTML

<div style="height:100%;background:#000;text-align:center;"><b>OUTSIDE OF PIN CONTAINER</b></div> 
<div id="pinContainer"> 
    <div class="panel first" style="background:#111;"> 
     <b>FIRST SLIDE</b> 
    </div> 
    <div class="panel second" style="background:#333;"> 
     <b>second slide</b> 
    </div> 
    <div class="panel third" style="background:#555;"> 
      <b>third slide</b> 
    </div> 
    <div class="panel fourth" style="background:#777;"> 
      <b>fourth slide</b> 
    </div> 
    <div class="panel fifth" style="background:#999;"> 
      <b>fifth slide</b> 
    </div> 
</div> 
<div style="background:pink;"> 
      <b>sixth slide</b> 
      <p> 
       Aenean lobortis arcu in aliquam rutrum. Aliquam ultrices consequat semper. Cras congue in mauris vel condimentum. Nullam at ipsum euismod, fermentum neque non, interdum lorem. Suspendisse semper, urna sed mattis pellentesque, ipsum urna accumsan enim, nec mattis tellus massa id velit. In quis dolor aliquam, maximus urna sed, vestibulum magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras sed sollicitudin urna. Etiam mi nibh, ornare in ligula auctor, eleifend hendrerit ipsum. Pellentesque in eros et erat iaculis bibendum. Vestibulum sed ornare sapien. Nunc nec quam ut erat interdum condimentum. Pellentesque mauris nulla, bibendum vel finibus eu, fringilla blandit sapien. 
      </p> 
      <p> 
       Aenean lobortis arcu in aliquam rutrum. Aliquam ultrices consequat semper. Cras congue in mauris vel condimentum. Nullam at ipsum euismod, fermentum neque non, interdum lorem. Suspendisse semper, urna sed mattis pellentesque, ipsum urna accumsan enim, nec mattis tellus massa id velit. In quis dolor aliquam, maximus urna sed, vestibulum magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras sed sollicitudin urna. Etiam mi nibh, ornare in ligula auctor, eleifend hendrerit ipsum. Pellentesque in eros et erat iaculis bibendum. Vestibulum sed ornare sapien. Nunc nec quam ut erat interdum condimentum. Pellentesque mauris nulla, bibendum vel finibus eu, fringilla blandit sapien. 
      </p> 
      <p> 
       Aenean lobortis arcu in aliquam rutrum. Aliquam ultrices consequat semper. Cras congue in mauris vel condimentum. Nullam at ipsum euismod, fermentum neque non, interdum lorem. Suspendisse semper, urna sed mattis pellentesque, ipsum urna accumsan enim, nec mattis tellus massa id velit. In quis dolor aliquam, maximus urna sed, vestibulum magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras sed sollicitudin urna. Etiam mi nibh, ornare in ligula auctor, eleifend hendrerit ipsum. Pellentesque in eros et erat iaculis bibendum. Vestibulum sed ornare sapien. Nunc nec quam ut erat interdum condimentum. Pellentesque mauris nulla, bibendum vel finibus eu, fringilla blandit sapien. 
      </p> 
    </div> 

<div style="background:purple;"> 
      <b>seventh slide</b> 
      <p> 
       Aenean lobortis arcu in aliquam rutrum. Aliquam ultrices consequat semper. Cras congue in mauris vel condimentum. Nullam at ipsum euismod, fermentum neque non, interdum lorem. Suspendisse semper, urna sed mattis pellentesque, ipsum urna accumsan enim, nec mattis tellus massa id velit. In quis dolor aliquam, maximus urna sed, vestibulum magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras sed sollicitudin urna. Etiam mi nibh, ornare in ligula auctor, eleifend hendrerit ipsum. Pellentesque in eros et erat iaculis bibendum. Vestibulum sed ornare sapien. Nunc nec quam ut erat interdum condimentum. Pellentesque mauris nulla, bibendum vel finibus eu, fringilla blandit sapien. 
      </p> 
      <p> 
       Aenean lobortis arcu in aliquam rutrum. Aliquam ultrices consequat semper. Cras congue in mauris vel condimentum. Nullam at ipsum euismod, fermentum neque non, interdum lorem. Suspendisse semper, urna sed mattis pellentesque, ipsum urna accumsan enim, nec mattis tellus massa id velit. In quis dolor aliquam, maximus urna sed, vestibulum magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras sed sollicitudin urna. Etiam mi nibh, ornare in ligula auctor, eleifend hendrerit ipsum. Pellentesque in eros et erat iaculis bibendum. Vestibulum sed ornare sapien. Nunc nec quam ut erat interdum condimentum. Pellentesque mauris nulla, bibendum vel finibus eu, fringilla blandit sapien. 
      </p> 
      <p> 
       Aenean lobortis arcu in aliquam rutrum. Aliquam ultrices consequat semper. Cras congue in mauris vel condimentum. Nullam at ipsum euismod, fermentum neque non, interdum lorem. Suspendisse semper, urna sed mattis pellentesque, ipsum urna accumsan enim, nec mattis tellus massa id velit. In quis dolor aliquam, maximus urna sed, vestibulum magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Cras sed sollicitudin urna. Etiam mi nibh, ornare in ligula auctor, eleifend hendrerit ipsum. Pellentesque in eros et erat iaculis bibendum. Vestibulum sed ornare sapien. Nunc nec quam ut erat interdum condimentum. Pellentesque mauris nulla, bibendum vel finibus eu, fringilla blandit sapien. 
      </p> 
    </div> 

JS

$(function() { // wait for document ready 
    // init 
    var controller = new ScrollMagic.Controller(); 
    // define movement of panels 
    var wipeAnimation = new TimelineMax() 
     .fromTo("div.panel.second", 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone}) // in from left 
     .fromTo("div.panel.third", 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone}) // in from right 
     .fromTo("div.panel.fourth", 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone}) // in from top 
     .fromTo("div.panel.fifth", 1, {y: "100%"}, {y: "0%", ease: Linear.easeNone}); // in from bottom 
     // create scene to pin and link animation 
    new ScrollMagic.Scene({ 
     triggerElement: "#pinContainer", 
     triggerHook: "onLeave", 
     duration: "300%" 
    }) 
    .setPin("#pinContainer") 
    .setTween(wipeAnimation) 
    .addTo(controller); 
}); 

CSSを

body { 
    font-family: "Source Sans Pro", Arial, sans-serif; 
    background-color: #c7e1ff; 
    font-size: 13px; 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    margin:0; 
    padding:0; 
    color:#fff; 
} 
body, html { 
    height: 100% 
} 
#pinContainer { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 
.panel { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    text-align:center; 
} 
b { 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    position:relative; 
    font-size:30px; 
}