我是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知识）。
管理多个场景和补间是否有更短更有效的方法？欢迎任何提示！
答案 0 :(得分：3)
您现在应该考虑使用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后备的全局控制器。我的控制器模块如下所示：
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();
});
});
});
从那时起，它只是对上述事物的转变。
玩得开心！
问候