jquery - 管理复杂的 ScrollMagic 代码

Question

我是 ScrollMagic 的新手，我正在尝试弄清楚一些事情。我正在开发一个具有相当复杂动画的网站，但我还没有找到任何有关编写有效 ScrollMagic 代码的教程或示例。

我不是程序员，只是对 jQuery 和 JavaScript 有基本的了解。

此时我有以下代码(我知道这有点困惑):

var controller;
$(document).ready(function($) {
    // init controller
    controller = new ScrollMagic({
  globalSceneOptions: {
    reverse: false
  }
});
});

$(document).ready(function($) {
    var tween = new TimelineMax()
  .add( TweenMax.from(".helloHeadline", 1.5, {opacity: 0, ease: Sine.easeOut}), 0 )
  .add( TweenMax.from(".helloTxt", 1.5, {opacity: 0, ease: Sine.easeOut}), 0 );
    var scene = new ScrollScene({triggerElement: "#hello", duration: 0, offset: 0})
                    .setTween(tween)
                    .addTo(controller);
    scene.addIndicators();
});
$(document).ready(function($) {
    var tween = new TimelineMax()
  .add( TweenMax.from(".components .simpleHeadline", 1.5, {opacity: 0, ease: Sine.easeOut}), 0 )
  .add( TweenMax.from("#components_bg", 1.25, {scale: 0, ease: Elastic.easeOut}), .5 )
  .add( TweenMax.from("#components_rabbit", 1.25, {scale: 0, ease: Elastic.easeOut}), 1 )
  .add( TweenMax.from("#components_overlay", 1, {opacity: 0, ease: Sine.easeInOut}), 1.25 );
    var scene = new ScrollScene({triggerElement: "#components_graphic", duration: 0, offset: -150})
                    .setTween(tween)
                    .addTo(controller);
    scene.addIndicators();
});
$(document).ready(function($) {
    var tween = TweenMax.from("#magic", 0.5, 
  {opacity: 0, ease: Quart.easeInOut}
);
    var scene = new ScrollScene({triggerElement: "#magic", duration: 400, offset: 0, triggerHook: 1})
                    .setTween(tween)
                    .addTo(controller);
    scene.addIndicators();
});
$(document).ready(function($) {
            var tween = new TimelineMax()
      .add( TweenMax.fromTo("#magic_hat", 0.01, {bottom: 800, opacity: 0}, {bottom: 800, opacity: 1}), 0 )
      .add( TweenMax.to("#magic_hat", 1, {bottom: "0", ease: Bounce.easeOut}), 0.02 )
      .add( TweenMax.from("#magic_hat_shadow", 1, {scale: 0, ease: Bounce.easeOut}), 0.02 )
      .add( TweenMax.fromTo("#magic_hand", .75, {opacity: 0}, {opacity: 1, left: 60, top: -10 ,ease: Quart.easeIn}), .75 )
      .add( TweenMax.to("#magic_hand", .5, {left: "-20", top: "4", ease: Circ.easeInOut, repeat: 2, yoyo: true}) )
      .add( TweenMax.to("#magic_hand", .5, {left: "0", top: "0", ease: Quart.easeOut}) )
      .add( TweenMax.from("#magic_hat_rabbit", .65, {top: "166", ease: Quart.easeOut}) );           
            var scene = new ScrollScene({triggerElement: "#magic", duration: 0, offset: 100})
                            .setTween(tween)
                            .addTo(controller);
            scene.addIndicators();
});
$(document).ready(function($) {
    var tween = TweenMax.from(".magicCntnt", 1, 
  {scale: 0, ease: Elastic.easeOut}
);
    var scene = new ScrollScene({triggerElement: "#magic", duration: 0, offset: 200})
                    .setTween(tween)
                    .addTo(controller);
    scene.addIndicators();
});

$(document).ready(function($) {
    var tween = TweenMax.from("#works_macbook_top", 1, 
  { rotationX: -80, ease: Sine.easeOut }
);
    var scene = new ScrollScene({triggerElement: ".works .graphic", duration: 250, offset: -100, reverse: true})
                    .setTween(tween)
                    .addTo(controller);
    scene.addIndicators();
});  

var stuffDuration = 1;
$(document).ready(function($) {
    var tween = TweenMax.from(".stuff.ruler", stuffDuration, {scale: 0, ease: Elastic.easeOut} );
    var scene = new ScrollScene({triggerElement: ".stuff.ruler", duration: 0, offset: 0}).setTween(tween).addTo(controller);
});
$(document).ready(function($) {
    var tween = TweenMax.from(".stuff.pencil", stuffDuration, {scale: 0, ease: Elastic.easeOut} );
    var scene = new ScrollScene({triggerElement: ".stuff.pencil", duration: 0, offset: 0}).setTween(tween).addTo(controller);
});
$(document).ready(function($) {
    var tween = TweenMax.from(".stuff.lightbulb", stuffDuration, {scale: 0, ease: Elastic.easeOut} );
    var scene = new ScrollScene({triggerElement: ".stuff.lightbulb", duration: 0, offset: 0}).setTween(tween).addTo(controller);
});

我正在等待您提供有关如何以更简单的方式管理此问题的提示。

我不确定是否需要单独的文档就绪函数，但我猜测声明相同的变量只能在单独的函数中工作(抱歉，缺乏 JavaScript/jQuery 知识)。

有没有更短、更有效的方法来管理多个场景和补间？欢迎任何提示!

Answer 1

您现在应该考虑使用 require.js，因为 ScrollMagic 从 v1.2 开始支持 UMD 模块加载。如果您还不了解 require.js，您应该继续阅读一些教程，例如 http://requirejs.org/本身。相信我，处理封装模块确实让生活变得更轻松。

使用 Bootstrap 入门模板设置一个 index.html，如下所示:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <script src="libs/modernizr/modernizr.js"></script>
    <script src="libs/requirejs/require.js" data-main="js/app.js"></script>
  </body>
</html>

由于您在最后加载了脚本，因此您不必执行 $(document).ready(...) 操作。完成上述步骤后，您可以使用 app.js 作为项目的入口点重新开始:

;(function (exports) {
  "use strict";

  require.config({
    baseUrl: '/js',
    packages: [
      {
        name: 'when',
        location: 'libs/when',
        main: 'when'
      }
    ],
    paths: {
      image: 'libs/requirejs-plugins/src/image',
      Spinner: 'libs/spin.js/spin',
      iScroll: 'libs/iscroll/build/iscroll-probe',
      ScrollMagic: 'libs/ScrollMagic/js/jquery.scrollmagic.min',
      ScrollScene: 'libs/ScrollMagic/js/jquery.scrollmagic.min',
      TimelineMax: 'libs/gsap/src/minified/TimelineMax.min',
      TweenMax: 'libs/gsap/src/minified/TweenMax.min',
      TweenLite: 'libs/gsap/src/minified/TweenLite.min',
      sprintf: 'libs/sprintf/dist/sprintf.min'
    },
      ScrollMagic: ['libs/ScrollMagic/js/jquery.scrollmagic.debug'], // FIXME debug
    },
    map: {
      '*': {
        'css': '/js/libs/require-css/css.min.js'
      }
    }
  });


  // Fixes the issue when jquery is already loaded (in our case in the <head>)
  define('jquery', function () {
    return jQuery;
  });

  require(['start']);
}(window));

下一步是为移动设备定义一个具有 iScroll 回退功能的全局 Controller 。我的 Controller 模块如下所示:

define(['jquery', 'ScrollMagic', 'iScroll'], function ($, ScrollMagic, iScroll) {
  "use strict";
  var controller;

  if (!true || Modernizr.touch) {
    var myScroll;
    $(function () {
      // wrap for iscroll
      var $container = $("#content-wrapper")
        .addClass("scrollContainer")
        .wrapInner('<div class="scrollContent"></div>');

      // add iScroll
      myScroll = new IScroll($container[0], {
        scrollX: false,
        scrollY: true,
        mouseWheel: true,
        scrollbars: true,
        useTransform: false, // Modernizr.csstransforms, // Do NOT enable transforms, since Scrollscene.setPin() won't work then
        useTransition: false, // Modernizr.csstransitions,
        probeType: 3,
        bounce: true,
        momentum: true,
        click: true
      });

      // init the controller
      controller = new ScrollMagic({container: $container[0]});

      $('html').css('overflow', 'hidden');

      // update container on scroll
      myScroll.on("scroll", function () {
        controller.update(true);
      });

      // overwrite scroll position calculation to use child's offset instead of parents scrollTop();
      controller.scrollPos(function () {
        return -myScroll.y;
      });

      $(window).on('load', function () {
        controller.update();
        myScroll.refresh();
      });

    });
  } else {
    controller = new ScrollMagic();
  }

  function debounce(func, wait, immediate) {
    var timeout;
    return function () {
      var context = this, args = arguments;
      clearTimeout(timeout);
      timeout = setTimeout(function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      }, wait);
      if (immediate && !timeout) func.apply(context, args);
    };
  };



  $(window).on('resize', debounce(function () {
    controller.update(true);
  }, 100)).trigger('resize');

  controller.debounce = debounce;
  return controller;
});

您的 start.js 应该需要您之前设置的全局 ScrollMagic controller 以及您的scrollmagic-项目所需的所有其他依赖项。以下是我如何实现这一目标的简短片段:

define(['jquery', 'spinner', 'preload', 'controller', 'ScrollScene', 'TweenMax'], function ($, spinner, preload, controller, ScrollScene, TweenMax) {
  "use strict";

  spinner = spinner().spin(document.body);

  require([ 'when', 'slide1', 'slide2', 'slide3'], function (when, slide1, slide2, slide3) {
    var preloading = when.all([slide1, slide2, slide3]);

    preloading.spread(function (slide1, slide2, slide3) {

      // Be awesome here

    });
    preloading.catch(function (e) {
      console.warn('Error', e);
      debugger;
    });


    preloading.progress(function (progress) {
      console.log(progress);
      spinner.progress(progress.current, progress.of);
    });


    preloading.finally(function () {
      spinner.stop();
    });

  });
});

从那时起，这只是上述内容的转变。

祝你玩得开心!

问候