scrollmagic 部分擦除示例的问题

Question

伙计们，我正在使用 scrollmagic 来实现其视差部分擦除视差效果。我一直在完全按照找到的方式关注演示 here，但我尝试的任何操作似乎都不起作用。这让我发疯我已经在这里待了几个小时了。我在这里遗漏了什么？

HTML

<body>
    <section class="panel blue">    
        <b>ONE</b>
    </section>
    <section class="panel turqoise">
        <b>TWO</b>
    </section>
    <section class="panel green">
        <b>THREE</b>
    </section>
    <section class="panel bordeaux">
        <b>FOUR</b>
    </section>
</body>

CSS

body, html {
    height: 100%
}                   
.panel {
height: 100%;
width: 100%;
}
.blue {
    background-color: #3883d8;
}
.green {
    background-color: #22d659;
}
.turqoise {
    background-color: #38ced7;
}
.bordeaux {
    background-color: #953543;
}

JavaScript/JQuery

$(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])
            .addIndicators() // add indicators (requires plugin)
        .addTo(controller);
    }
});

感谢您的帮助！

Answer 1

您可以使用他们的示例相当轻松地创建它。下面是一些适合您的代码，只需将其复制并粘贴到 html 页面中，您就可以根据自己的喜好为每张幻灯片自定义 javascript 和 css。确保包含它需要的所有必需库 jquery、TweenMax、ScrollMagic 和 animation.gsap。我已直接链接到它们，因此您可以复制它并查看它是否有效，但您可以在下载的 scrollmagic 中找到它们。

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic|Josefin+Slab:400,700italic' rel='stylesheet' type='text/css'>
<style>
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;
}
</style>


</head>
<body>
<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>IN FROM LEFT</b>
     </div>
     <div class="panel third" style="background:#555;">
          <b>IN FROM RIGHT</b>
     </div>
     <div class="panel fourth" style="background:#777;">
          <b>IN FROM TOP</b>
     </div>
     <div class="panel fifth" style="background:#999;">
          <b>IN FROM BOTTOM</b>
     </div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script>
$(function () { // wait for document ready
     // init
     var controller = new ScrollMagic.Controller();
     // define movement of panels
     var wipeAnimation = new TimelineMax()
         .fromTo("div.panel.second", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
         .fromTo("div.panel.third",    1, {x:  "100%"}, {x: "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);
});
</script>
</body>
</html>

我已经在我的浏览器中测试过了，它工作正常。

scrollmagic 部分擦除示例的问题

trouble with scrollmagic section wipe example

html

css

jquery

parallax

scrollmagic