-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy path02.tweening+pinning.html
168 lines (133 loc) · 5.94 KB
/
02.tweening+pinning.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
<!DOCTYPE html>
<html>
<head>
<title>02 - Tweening and Pinning</title>
<link href="css/normalize.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,300,700,900" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet">
<!-- LOAD JS LIBRARIES -->
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/greensock/TweenMax.min.js"></script>
<!-- LOAD SCROLL MAGIC -->
<script src="scrollmagic/uncompressed/ScrollMagic.js"></script>
<!-- LOAD PLUGINS FOR SCROLL MAGIC -->
<script src="scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
<script src="scrollmagic/uncompressed/plugins/animation.gsap.js"></script>
</head>
<body>
<div id="triggerDrone2" class="trigger"></div>
<section class="full flex-h-centred flex-v-centred">
<div id="drone2" class="drone">
<img src="images/drone.png" alt="Describe this image!">
</div>
</section>
<section id="one" class="full flex-h-centred flex-v-bottom">
<h1 class="animated buzz infinite">Beesness</h1>
</section>
<section class="content">
<h3>A <em>playable</em> simulation of a <strong>capitalist economy</strong></h3>
<p>As a player, you control a <em>bee colony</em>. </p>
<p>All colonies operate in the <em>garden of Commons</em>.</p>
<p>Throughout the game, you can deploy different <em>beesness models</em>: from converting flowers' nectar into honey, to stealing other colonies' honey, privatising flowers and other nasty moves..</p>
<h3>Your goal</h3>
<p>To have the most <strong>honey</strong> at the end of the year!</p>
</section>
<div id="triggerDrone1" class="trigger"></div>
<section id="two" class="full flex-h-centred flex-v-centred">
<div id="drone1" class="drone">
<img src="images/drone.png" alt="Describe this image!">
</div>
</section>
<section id="three" class="full">
</section>
<section class="content">
<h2>End play scenarios</h2>
<ol>
<li>At the end of the year (12 turns), the colony with the <strong>most honey wins</strong>, provided there are still some flowers left in the <em>garden</em>.</li>
<li>If all flowers are picked from the garden, at any point during the game, <strong>everybody loses</strong>.</li>
</ol>
</section>
<section id="four" class="full">
</section>
<section id="five" class="full flex-h-centred flex-v-centred">
<div id="mc_embed_signup" class="content">
<h2>Sign up for updates</h2>
<form action="//twitter.us12.list-manage.com/subscribe/post?u=43efbdeecd252c30b1ead06d0&id=ab4c4ec792" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Your email</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="[email protected]">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_43efbdeecd252c30b1ead06d0_ab4c4ec792" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</form>
</div>
</section>
<script>
$(function ()
{
// start a new ScrollMagic controller
var controller = new ScrollMagic.Controller()
// let's set the scene
var sceneOptions = {}
// let's define the element that will trigger the animation, using a CSS-like selector
sceneOptions.triggerElement = '#triggerDrone1'
// duration defines how "long" the animation is
// sceneOptions.duration = 0 // 0 will keep the element pinned indefinitely
// sceneOptions.duration = 782 // will keep the element pinned for X pixels
sceneOptions.duration = '100%' // will keep the element pinned for X% of the browser's height
// triggerHook defines where on the page the animation is triggered
sceneOptions.triggerHook = 0 // from 0 (top) to 1 (bottom), default to center (0.5)
// ..and then creat the scene
var scene = new ScrollMagic.Scene(sceneOptions)
scene.addIndicators({name: 'drone1'}) // add indicators
scene.addTo(controller)
// let's pin the drone (make it stick whilst the rest of the page scroll)
var pinOptions = {}
pinOptions.pushFollowers = false
// ..and activate the pin
scene.setPin('#drone1', pinOptions)
// we can use a Tween to define more complex animations, see https://greensock.com/tweenmax
var tweenOptions = {}
tweenOptions.scale = 0.2 // 1 is the normal size
tweenOptions.rotation = -360
tweenOptions.x = '-200%'
tweenOptions.opacity = 0 // 0 = transparent, 1 = opaque
// ..and activate the tween
scene.setTween('#drone1', tweenOptions)
// DRONE 2
var scene2Options = {}
scene2Options.triggerElement = '#triggerDrone2'
scene2Options.duration = '100%'
scene2Options.triggerHook = 0
var scene2 = new ScrollMagic.Scene(scene2Options)
scene2.addIndicators({name: 'drone2'}) // add indicators
scene2.addTo(controller)
var pin2Options = {}
pin2Options.pushFollowers = false
// ..and activate the pin
scene2.setPin('#drone2', pin2Options)
/*var tween2 = TweenMax.from("#drone2", 1, {scale: 0, opacity:0});
scene2.addTween(tween2)*/
var tween2Options = {}
tween2Options.scale = 1 // 1 is the normal size
tween2Options.opacity = 1 // 0 = transparent, 1 = opaque
// ..and activate the tween
scene2.setTween('#drone2', tween2Options)
})
/*function makeTea(whichTea, howMuchSugar)
{
}*/
</script>
</body>
</html>