Javascript 为什么我的Scrollmagic/Greenstock动画不起作用？_Javascript_Jquery_Css_Animation_Scrollmagic

Javascript 为什么我的Scrollmagic/Greenstock动画不起作用？

javascript jquery css animation

Javascript 为什么我的Scrollmagic/Greenstock动画不起作用？,javascript,jquery,css,animation,scrollmagic,Javascript,Jquery,Css,Animation,Scrollmagic,我刚开始使用scrollmagic，但我似乎无法让它正常工作。我按照一个简单的教程在不同的部分做了一些动画。我不确定是否没有导入这些类，对吧，但我被卡住了。非常感谢您的帮助，我已经附上了我的js、html和css文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ScrollMagic #1 Setup</title&

我刚开始使用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>

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

通过设置一个JSFIDLE并解释什么不起作用来帮助用户。有时，这可以通过解释工作原理来实现。它不起作用，对任何人都没有帮助。啊，谢谢你的建议。不起作用的部分实际上是动画。如果您查看javascriptt部分，它使用了greenstick动画，但它们不能正常工作。在javascript中的缩放和背景场景中，它应该设置字体的动画以放大，背景场景应该改变背景。这是我遵循的代码笔：@playermany2该代码笔似乎工作得很好，您可能需要更详细地解释您的问题。@playermany2对，那实际上不是您在该代码笔中的代码。这是一个基本的开始，可能需要调整以重现发生在你身上的一切：

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