2

視差セクションのワイプ視差効果にscrollmagicを使用しています。ここにあるデモを正確にフォローしてきましたが、何もうまくいかないようです。私は何時間もこれにいたので、私は夢中になっています。ここで何を除外していますか？

ここにjsfiddleがあります

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

ご協力ありがとうございます。

4

1 に答える 1

3

それらの例を使用して、これをかなり簡単に作成できます。これは、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>

ブラウザでこれをテストしましたが、正常に動作します。

于 2015-11-07T04:25:36.263 に答える