Question

我试图使用ScrollMagic，但是当我检查提供此功能的元素时，它不起作用

error255未捕获的ReferenceError：未定义$

即使我在页眉中包含了所有库，在页面底部也包含了实际的脚本。

标题

<script src="js/ScrollMagic.min.js"></script>
<script src="js/debug.addIndicators.min.js"></script>
<script src="js/animation.gsap.min.js"></script>
<script src="js/animation.velocity.min.js"></script>

脚本

<script>
    $(function () { // wait for document ready
      // init
      var controller = new ScrollMagic.Controller();

      // define movement of panels
      var wipeAnimation = new TimelineMax()
        .fromTo("section.panel.pink", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
        .fromTo("section.panel.green", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
        .fromTo("section.panel.red", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
        .fromTo("section.panel.blue", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
        .fromTo("section.panel.white", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left

      // create scene to pin and link animation
      new ScrollMagic.Scene({
          triggerElement: "#designPart",
          triggerHook: "onLeave",
          duration: "300%"
        })
        .setPin("#designPart")
        .setTween(wipeAnimation)
        .addIndicators() // add indicators (requires plugin)
        .addTo(controller);
    });
</script>

我正在使用它的部分。

<div id="designPart">
  <p>Design</p>
  <section class="panel pink">
    <img src="images/pink.png">
  </section>
  <section class="panel green">
    <img src="images/green.png">
  </section>
  <section class="panel red">
    <img src="images/red.png">
  </section>
  <section class="panel blue">
    <img src="images/blue.png">
  </section>
  <section class="panel white">
    <img src="images/white.png">
  </section>
</div><!--designPart-->

Answer 1

您似乎并没有加载jQuery库本身（而ScrollMagic使用jQuery）-错误消息只是告诉您，没有可使用“ $”变量引用的jQuery对象

确保将jQuery PRIOR加载到ScrollMagic，以便jQuery名称空间在ScrollMagic要求它之前存在，如Snowmonkey在下面的注释中所述。

您需要从本地来源加载jQuery，例如：

<script src="js/jquery-2.1.1.js"></script>

或来自CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

从CDN（内容交付网络）加载通用库（如jQuery）的一个好处是，用户很有可能已经从其他Web活动中将其缓存在浏览器中，如果缓存了，浏览器会无需再次加载。

Answer 2

$(function() {
      
  var controller = new ScrollMagic.Controller();

  var wipeAnimation = new TimelineMax()
  .fromTo("section.panel.pink",  1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})
  .fromTo("section.panel.green", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})
  .fromTo("section.panel.red",   1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})
  .fromTo("section.panel.blue",  1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})
  .fromTo("section.panel.white", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone});

  // create scene to pin and link animation
  new ScrollMagic.Scene({
      triggerElement: "#designPart",
      triggerHook: "onLeave",
      duration: "300%"
  })
  .setPin("#designPart")
    .setTween(wipeAnimation)
    .addIndicators()
    .addTo(controller);
});

section img {
  height: 32px;
  width: 32px;
}

<!-- those are all the libraries required:-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineMax.min.js"></script>

<div id="designPart">
  <p>Design</p>
  <section class="panel pink">
    <img src="https://www.sqlite.org/images/nocopy.gif">
  </section>
  <section class="panel green">
    <img src="https://www.sqlite.org/images/nocopy.gif">
  </section>
  <section class="panel red">
    <img src="https://www.sqlite.org/images/nocopy.gif">
  </section>
  <section class="panel blue">
    <img src="https://www.sqlite.org/images/nocopy.gif">
  </section>
  <section class="panel white">
    <img src="https://www.sqlite.org/images/nocopy.gif">
  </section>
</div>

255未被捕获的ReferenceError：添加ScrollMagic后未定义$

2 个答案: