2

我需要任何有使用 scrollmagic.js 经验的人的帮助

我正在尝试创建类似的东西： http ://work.antonandirene.com/karimrashid/

滚动页面时部分重叠的位置。

我正在使用滚动魔法（http://scrollmagic.io/）

小提琴：http: //jsfiddle.net/st86x71m/1/

我遇到的主要问题是允许高于 100% 的内容在下一个面板可见之前滚动。我已经解决了这个问题，但有一些问题......

我的问题：

我需要在附加内容完成滚动后删除间隙，以便下一个面板显示附加内容何时位于其父级的底部，而不是现在的 -100%。

我还需要弄清楚如何动态设置 z-index，以便上一张幻灯片具有更高的 z-index。我目前正在css中手动设置它们。

任何帮助表示赞赏，

谢谢大家。乔恩。

console.clear();
console.log("ScrollMagic v%s loaded", ScrollMagic.version);

// init
var controller = new ScrollMagic.Controller();

// define movement of panels
var wipeAnimation = new TimelineMax()
  .fromTo("section.panel.blue", 1, {
    y: "0"
  }, {
    y: "-100%",
    ease: Linear.easeNone
  }) // in from left
  .to("section.panel .additionalContent", 1, {
    y: "-100%",
    ease: Linear.easeNone
  })
  .fromTo("section.panel.turqoise", 1, {
    y: "0"
  }, {
    y: "-100%",
    ease: Linear.easeNone
  }) // in from left
  .fromTo("section.panel.green", 1, {
    y: "0"
  }, {
    y: "-100%",
    ease: Linear.easeNone
  }) // in from right
  .fromTo("section.panel.bordeaux", 1, {
    y: "0"
  }, {
    y: "0",
    ease: Linear.easeNone
  }); // in from top

// create scene to pin and link animation
new ScrollMagic.Scene({
    triggerElement: "#pinContainer",
    triggerHook: "onLeave",
    duration: "400%"
  })
  .setPin("#pinContainer")
  .setTween(wipeAnimation)
  .addTo(controller);
html,
        body {
            height: 100%;
            margin: 0;
        }
        #pinContainer {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .panel {
            height: 100%;
            width: 100%;
            position: absolute;
            text-align: center;
        }
        .panel .additionalContent {
            /*top:0;*/
            /*position: absolute;*/
        }
        .blue {
            background-color: #3883d8;
            z-index: 10;
        }
        .turqoise {
            background-color: #38ced7;
            z-index: 9;
        }
        .green {
            background-color: #22d659;
            z-index: 8;
        }
        .bordeaux {
            background-color: #953543;
            z-index: 7;
        }
        .panel > b {
            font-size: 15px;
            color: white;
            position: relative;
            display: block;
            height: 0;
            overflow: visible;
            top: 50%;
        }
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>

<div id="pinContainer">
        <section class="panel blue">
            <b>ONE</b>
        </section>
        <section class="panel turqoise">
            <b>TWO</b>
            <div class="additionalContent">
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>TEXT</p>
                <p>END</p>
            </div>
        </section>
        <section class="panel green">
            <b>THREE</b>
        </section>
        <section class="panel bordeaux">
            <b>FOUR</b>
        </section>
    </div>

4

0 回答 0