forked from janpaepke/ScrollMagic
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
280 lines (264 loc) · 18.1 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ScrollMagic - Simple Demo #1</title>
<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body class="simple-demo">
<div id="buttons">
<input id="scrollToInput" name="scrollToValue" placeholder="int || element id (without hash)" /> <button id="scrollTo">Scroll</button>
<input id="scrollToTopInput" name="scrollToTopValue" type="hidden" value="0" /> <button id="scrollToTop">Scroll To Top</button>
<input id="scrollToBottomInput" name="scrollToBottomValue" type="hidden" value="" /> <button id="scrollToBottom">Scroll To Bottom</button>
</div>
<div id="content-wrapper">
<div class="topSpacer"></div>
<div class="scene" id="one">
<div class="pin">Story snippets from Futurama are great!</div>
<div id="wrapper">
<div class="content">
<h1>Brannigan, Begin Again</h1>
<p>Michelle, I don't regret this, but I both rue and lament it. You don't know how to do any of those. Tell her she looks thin. You can see how I lived before I met you.</p>
<h2>Crimes of the Hot</h2>
<p>Too much work. Let's burn it and say we dumped it in the sewer. And I'm his friend Jesus. I love this planet! I've got wealth, fame, and access to the depths of sleaze that those things bring. Kif, I have mated with a woman. Inform the men.</p>
<ul>
<li>You'll have all the Slurm you can drink when you're partying with Slurms McKenzie!</li>
<li>Soon enough.</li>
<li>So, how 'bout them Knicks?</li>
<li>Really?!</li>
<li>I suppose I could part with 'one' and still be feared…</li>
</ul>
<h3>Leela's Homeworld</h3>
<p>Soon enough. You know the worst thing about being a slave? They make you work, but they don't pay you or let you go. I've got to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I'' have to pay ''them'! There, now he's trapped in a book I wrote: a crummy world of plot holes and spelling errors! Who's brave enough to fly into something we all keep calling a death sphere? Good news, everyone! I've taught the toaster to feel love!</p>
<h4>Roswell That Ends Well</h4>
<p>Hello, little man. I will destroy you! Ask her how her day was. Kif might! Meh.</p>
<ol>
<li>Bite my shiny metal ass.</li>
<li>Oh, you're a dollar naughtier than most.</li>
<li>And I'm his friend Jesus.</li>
<li>WINDMILLS DO NOT WORK THAT WAY! GOOD NIGHT!</li>
<li>Shut up and take my money!</li>
</ol>
<h5>The Deep South</h5>
<p>Fry, we have a crate to deliver. Soothe us with sweet lies. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.</p>
<h6>A Bicyclops Built For Two</h6>
<p>In our darkest hour, we can stand erect, with proud upthrust bosoms. Say it in Russian! Interesting. No, wait, the other thing: tedious.</p>
<p>Hey! I'm a porno-dealing monster, what do I care what you think? Fry! Quit doing the right thing, you jerk! Look, last night was a mistake. Dr. Zoidberg, that doesn't make sense. But, okay!</p>
<p>Bender, quit destroying the universe! No, she'll probably make me do it. Soothe us with sweet lies.</p>
<p>I'm just glad my fat, ugly mama isn't alive to see this day. Tell them I hate them. You'll have all the Slurm you can drink when you're partying with Slurms McKenzie! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man. Really?! You, minion. Lift my arm. AFTER HIM!</p>
<p>It's a T. It goes "tuh". Why yes! Thanks for noticing. Oh Leela! You're the only person I could turn to; you're the only person who ever loved me. So, how 'bout them Knicks?</p>
<p>Whoa a real live robot; or is that some kind of cheesy New Year's costume? Uh, is the puppy mechanical in any way? I don't know what you did, Fry, but once again, you screwed up! Now all the planets are gonna start cracking wise about our mamas. With gusto.</p>
<p>Ven ve voke up, ve had zese wodies. Why did you bring us here? Why not indeed!</p>
<p>Now what? Oh, you're a dollar naughtier than most. Daylight and everything. Why not indeed! Belligerent and numerous.</p>
<p>Why not indeed! You don't know how to do any of those. Who are those horrible orange men? Bender, being God isn't easy. If you do too much, people get dependent on you, and if you do nothing, they lose hope. You have to use a light touch. Like a safecracker, or a pickpocket. But I know you in the future. I cleaned your poop.</p>
<p>Hey! I'm a porno-dealing monster, what do I care what you think? I'm just glad my fat, ugly mama isn't alive to see this day. Well, let's just dump it in the sewer and say we delivered it.</p>
</div>
<div class="backgrounds">
<div class="bg bg-1"></div>
<div class="bg bg-2">
<div class="bg subbg-1 bgStagger"></div>
<div class="bg subbg-2 bgStagger"></div>
<div class="bg subbg-3 bgStagger"></div>
<div class="bg subbg-4 bgStagger"></div>
<div class="bg subbg-5 bgStagger"></div>
<div class="bg subbg-6 bgStagger"></div>
</div>
<div class="bg bg-3"></div>
</div>
</div>
</div>
<!-- <div class="scene" id="two">
<div class="pin">Story snippets from Star Wars is even better!</div>
<div id="wrapper">
<div class="content">
<h1>Imperial Star Destroyer</h1>
<p>You don't believe in the Force, do you? I have traced the Rebel spies to her. Now she is my only link to finding their secret base. Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Red Five standing by.</p>
<h2>The Phantom Menace</h2>
<p>Escape is not his plan. I must face him, alone. You're all clear, kid. Let's blow this thing and go home! Don't act so surprised, Your Highness. You weren't on any mercy mission this time. Several transmissions were beamed to this ship by Rebel spies. I want to know what happened to the plans they sent you. The plans you refer to will soon be back in our hands. Your eyes can deceive you. Don't trust them.</p>
<ul>
<li>I have traced the Rebel spies to her. Now she is my only link to finding their secret base.</li>
<li>What?!</li>
</ul>
<h3>The Empire Strikes Back</h3>
<p>Partially, but it also obeys your commands. What!? Don't underestimate the Force. You don't believe in the Force, do you?</p>
<h4>Attack of the Clones</h4>
<p>All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it? What!? I'm surprised you had the courage to take the responsibility yourself. I have traced the Rebel spies to her. Now she is my only link to finding their secret base. Ye-ha!</p>
<ol>
<li>Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is.</li>
<li>I need your help, Luke. She needs your help. I'm getting too old for this sort of thing.</li>
<li>Your eyes can deceive you. Don't trust them.</li>
<li>You don't believe in the Force, do you?</li>
</ol>
<h5>The Clone Wars</h5>
<p>She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Still, she's got a lot of spirit. I don't know, what do you think?</p>
<h6>Knights of the Old Republic</h6>
<p>Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. I care. So, what do you think of her, Han? You don't believe in the Force, do you? Look, I ain't in this for your revolution, and I'm not in it for you, Princess. I expect to be well paid. I'm in it for the money.</p>
<p>I'm trying not to, kid. But with the blast shield down, I can't even see! How am I supposed to fight? He is here.</p>
<p>All right. Well, take care of yourself, Han. I guess that's what you're best at, ain't it? I'm trying not to, kid. Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. No! Alderaan is peaceful. We have no weapons. You can't possibly…</p>
<p>I suggest you try it again, Luke. This time, let go your conscious self and act on instinct. You don't believe in the Force, do you? The Force is strong with this one. I have you now. Hokey religions and ancient weapons are no match for a good blaster at your side, kid.</p>
<p>Your eyes can deceive you. Don't trust them. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! Red Five standing by. The more you tighten your grip, Tarkin, the more star systems will slip through your fingers. No! Alderaan is peaceful. We have no weapons. You can't possibly…</p>
<p>I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan-- Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. You mean it controls your actions? I care. So, what do you think of her, Han? You don't believe in the Force, do you? I call it luck.</p>
<p>I suggest you try it again, Luke. This time, let go your conscious self and act on instinct. You're all clear, kid. Let's blow this thing and go home! In my experience, there is no such thing as luck.</p>
<p>I need your help, Luke. She needs your help. I'm getting too old for this sort of thing. Leave that to me. Send a distress signal, and inform the Senate that all on board were killed. As you wish.</p>
<p>Hey, Luke! May the Force be with you. She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! As you wish.</p>
<p>Don't underestimate the Force. No! Alderaan is peaceful. We have no weapons. You can't possibly… Leave that to me. Send a distress signal, and inform the Senate that all on board were killed. I want to come with you to Alderaan. There's nothing for me here now. I want to learn the ways of the Force and be a Jedi, like my father before me. I care. So, what do you think of her, Han? I have traced the Rebel spies to her. Now she is my only link to finding their secret base.</p>
</div>
<div class="backgrounds">
<div class="bg bg-1"></div>
<div class="bg bg-2">
<div class="bg subbg-1 bgStagger"></div>
<div class="bg subbg-2 bgStagger"></div>
<div class="bg subbg-3 bgStagger"></div>
<div class="bg subbg-4 bgStagger"></div>
<div class="bg subbg-5 bgStagger"></div>
<div class="bg subbg-6 bgStagger"></div>
</div>
<div class="bg bg-3"></div>
</div>
</div>
</div> -->
<div class="bottomSpacer"></div>
</div>
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
<script type="text/javascript" src="js/greensock/plugins/ScrollToPlugin.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/jquery.scrollmagic.js"></script>
<script>
var getSceneHeight = function(sceneId, duration) {
var h = $(sceneId+' #wrapper .content').outerHeight(true);
return (duration)? h-$(sceneId+' .pin').outerHeight(true) : h;
},
setContentPosition = function(sceneId) {
$(sceneId+' #wrapper').css({
left: $(sceneId+' .pin').outerWidth(true),
width: $(window).width()-$(sceneId+' .pin').outerWidth(true)
});
$(sceneId+' #wrapper .backgrounds, .bg').css({
width: $(window).width()-$(sceneId+' .pin').outerWidth(true)
});
$(sceneId+' #wrapper .backgrounds').css({
height: getSceneHeight('#one', false)
});
},
// helper testing methods
isInt = function(num) {
var regEx = /^\d+$/;
return regEx.test(num);
};
// scroll to click
$('#buttons button').on('click', function() {
var value = $(this).prev().val();
if(!isInt(value) && $('#'+value).length > -1) {
value = $('#'+value).offset().top;
} else if(!isInt(value)) {
return false;
}
if($(this).prop('id') === 'scrollTo') {
// subtract 250 from the top
value = value-250;
}
TweenMax.to(window, 1.5, {scrollTo: parseInt(value), ease: Quad.easeInOut});
return false;
});
$(function() {
// add space to top and bottom of scene so we can test easier
$('.topSpacer, .bottomSpacer').height($(window).height());
$('#scrollToBottomInput').val($(window).height()*4);
var controller = new ScrollMagic({loglevel: 2, globalSceneOptions: {loglevel: 2}});
// so this is the offset at which to trigger the pinning AND the animation, right? perhaps we could move the offset property
// into the setTween and setPin methods so that they can have independent startpoints.
offset = 250-$(window).height();
setContentPosition('#one');
// set the duration equal to the height of the content node within the scene
duration = getSceneHeight('#one', true);
var sceneOne = controller.addNewScene($('#one'), {duration: duration, offset: offset, triggerHook: 'onEnter'})
// .setTween(TweenMax.to('#one .pin', 1, {color: 'red', left: '+=100'}));
// .on('progress', function (e) { console.log ('progress', e); })
// .on('change', function (e) { console.log ('change', e); })
// .on('start', function (e) { console.log ('start', e); })
// .on('end', function (e) { console.log ('end', e); })
// .on('enter', function (e) { console.log ('enter', e); })
// .on('leave', function (e) { console.log ('leave', e); })
.setTween(TweenMax.to('#one .pin', .5, {
color: '#000000',
textShadow: '1px 1px 1px rgba(205, 205, 205, 0.85)',
}))
.setPin('#one .pin');
var sceneOnePinEnter = controller.addNewScene($('#one .pin'), {duration: $(window).height(), offset: 0, triggerHook: 'onEnter'})
.setTween(TweenMax.from('#one .pin', .5, {
opacity: -0.25,
backgroundPositionX: '-=100px',
ease: Linear.easeNone
}));
var sceneOnePinLeave = controller.addNewScene($('#one .pin'), {duration: $(window).height(), offset: 250, triggerHook: 'onLeave'})
.setTween(TweenMax.to('#one .pin', .5, {
opacity: 0,
backgroundPositionX: '-=200px'
}));
var sceneOneBackgroundOneEnter = controller.addNewScene($('#one .backgrounds .bg-1'), {duration: duration*2, offset: 0, triggerHook: 'onEnter'})
.setTween(TweenMax.to('#one .backgrounds .bg-1', .5, {
// backgroundPositionY: '+='+duration+'px',
marginTop: '+='+duration+'px',
ease: Linear.easeNone
}));
var sceneOneBackgroundTwo = controller.addNewScene($('#one .backgrounds .bg-2'), {duration: duration, offset: 0, triggerHook: 'onEnter'})
.setTween(TweenMax.to('#one .backgrounds .bg-2', .5, {
backgroundPositionX: '+='+duration*2+'px',
ease: Cubic.easeInOut
}));
var sceneOneBackgroundTwoSubSceneEnter = controller.addNewScene($('#one .backgrounds .bg-2'), {duration: duration, offset: 200, triggerHook: 'onEnter'})
.setTween(new TimelineMax().add(TweenMax.staggerFromTo('.bg-2 .bgStagger', .5, {
marginLeft: '50%',
ease: Elastic.easeInOut
}, {
marginLeft: '0',
rotationY: 360,
transformOrigin: 'null 128px 64px',
ease: Elastic.easeInOut
}, .15)));
var sceneOneBackgroundTwoSubSceneLeave = controller.addNewScene($('#one .backgrounds .bg-2'), {duration: duration, offset: 400, triggerHook: 'onLeave'})
.setTween(new TimelineMax().add(TweenMax.staggerTo('.bg-2 .bgStagger', .5, {
marginTop: '-=800px',
ease: Quad.easeInOut
}, .15)));
var sceneOneBackgroundThree = controller.addNewScene($('#one .backgrounds .bg-3'), {duration: duration, offset: 0, triggerHook: 'onEnter'})
.setTween(TweenMax.to('#one .backgrounds .bg-3', .5, {
marginTop: '-='+duration/2+'px',
rotationY: 360,
transformOrigin: 'null 540px 270px',
ease: Quad.easeInOut
}));
// offset = 250-$(window).height();
// setContentPosition('#two');
// duration = getSceneHeight('#two', true);
// var sceneTwo = controller.addNewScene($('#two'), {duration: duration, offset: offset, triggerHook: 'onEnter'})
// .setTween(TweenMax.to('#two .pin', .5, {
// color: '#000000',
// textShadow: '1px 1px 1px rgba(205, 205, 205, 0.85)',
// }))
// .setPin('#two .pin');
$('#one .pin').click(function () {
// scene.duration(scene.duration() - 100);
// console.log(controller.scrollDirection());
// scene.unbind('change');
// scene.remove();
// why would we ever want to do this? perhaps this is just illustrating that it CAN be done
// scene.duration(scene.duration() - 200);
// scene.setTween(new TimelineMax().add(TweenMax.to('#one .pin', 1, {color: 'blue', left: '-=100'})))
// .duration(600)
// .setOption({triggerHook: function () {return .5}, offset: 0, smoothTweening: true})
// .removeTween();
// controller.updateScenes();
});
$(document).keypress (function () {
// not sure what this is an example of...
console.log('keypress');
//scene.addTo(controller);
})
});
</script>
</body></html>