私は 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 の知識が不足しています)。
複数のシーンとトゥイーンを管理するための、より短時間で効果的な方法はありますか? どんなヒントでも大歓迎です！