Question

使用此演示：

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

我试图弄清楚如何在最后一次擦除部分之后添加其他内容。这里对我想要完成的事情有一个粗略的了解，希望它有意义。

代码示例会有所帮助。

主要问题是最后一个wipr部分保持固定在顶部，并且不允许其后面的内容移动到顶部，而不是在它后面。

Answer 1

我一直试图完成同样的事情。我在jsFiddle上找到了一个示例，并对其进行了修改，以便最后两个部分的行为正常（向上滚动页面而不重叠以前的内容）：

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;
}

ScrollMagic.js - 如何在部分滑动后添加内容？

1 个答案: