0

我刚开始使用scrollmagic，但我似乎无法让它正常运行。我按照一个简单的教程在不同的部分做了一些动画。我不确定是否没有导入类，对，但我被卡住了。非常感谢您的帮助，我附上了我的 js、html 和 css 文件。

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>ScrollMagic #1 Setup</title>
     <script>
      window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')
    </script>
    <link rel="stylesheet" href="style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/lib/greensock/TweenMax.min.js"></script>
        <script src="js/uncompressed/plugins/animation.gsap.min.js">    </script>
    <script src="main.js"></script>
    <script src="js/uncompressed/ScrollMagic.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
</head>

<body>

<main class="full-screen" role="main">
  <section class="full-screen blue">
    <div>
      <h1>Basic Tweening</h1>
    </div>
  </section>

  <section id="scale-trigger" class="full-screen orange">
    <div id="scale-animation">
      <p>This element will scale down using the scale value of the CSS transform property.</p>
    </div>
  </section>

  <section id="bg-trigger" class="full-screen red">
    <div id="bg-animation">
      <p>This element will have the background color change</p>
    </div>
  </section>

  <section id="yoyo-trigger" class="full-screen blue">
    <div>
      <p id="yoyo-animation">Section Four yoyo Text!</p>
    </div>
  </section>
</main>

</body>
</html>

JS文件

 (function($) {
   // Scale Animation Setup
// .to('@target', @length, {@object})
var scale_tween = TweenMax.to('#scale-animation', 1, {
  transform: 'scale(.75)',
  ease: Linear.easeNone
});

// BG Animation Setup
// .to('@target', @length, {@object})
var bg_tween = TweenMax.to('#bg-trigger', 1, {
  backgroundColor: '#FFA500',
  ease: Linear.easeNone
});

// YoYo Animation Setup
// .to(@target, @length, @object)
var yoyo_tween = TweenMax.to('#yoyo-animation', 1, {
  transform: 'scale(2)',
  ease: Cubic.easeOut,
  repeat: -1, // this negative value repeats the animation
  yoyo: true // make it bounce…yo!
});


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


// Scale Scene
var scale_scene = new ScrollMagic.Scene({
  triggerElement: '#scale-trigger'
})
.setTween(scale_tween);

// Background Scene
var bg_scene = new  ScrollMagic.Scene({
  triggerElement: '#bg-trigger'
})
.setTween(bg_tween);

// YoYo Scene
var yoyo_scene = new  ScrollMagic.Scene({
  triggerElement: '#yoyo-trigger'
})
.setTween(yoyo_tween);

controller.addScene([
  scale_scene,
  bg_scene,
  yoyo_scene
]);

})(jQuery);

CSS文件

html,
body {
  margin: 0;
  height: 100%
}

h1,
p {
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  top: 10px;
  left: 10px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #EFEFEF;
}

.full-screen {
  height: 100%; /* makes panels the entire window height */
}

.blue {
    background-color: #3883d8;
}
.red {
    background-color: #cf3535;
}
.orange {
    background-color: #ea6300;
}
4

0 回答 0