-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsecond.html
254 lines (183 loc) · 8.09 KB
/
second.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Information | Kelvin O'Shea</title>
<meta name="description" content="Motion Graphics">
<meta name="author" content="Kelvin O'Shea">
<link href="https://fonts.googleapis.com/css?family=Passion+One:700|Raleway:400,900" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/libraries/jquery.fullPage.css">
<link rel="stylesheet" href="css/animate.css">
<script src="https://use.fontawesome.com/31a1b0f519.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="header">
<a href="index.html"><h3 class="motion">Motion</h3></a>
</div>
<div id="fullpage">
<div class="section intro">
<div class="intro-text">
<h1 class="animated fadeInUp">Information</h1>
<p class="animated fadeInUp">Concept development through the idea of visually depicting knowledge and data.</p>
<hr>
</div>
<div class="nav-down"><i class="fa fa-arrow-down" aria-hidden="true"></i></div>
</div>
<div class="section">
<div class="subtitle">
<p>Mindmap</p>
<hr>
</div>
</div>
<div class="section">
<div class="slide" id="mindmap"></div>
</div>
<div class="section">
<div class="subtitle">
<p>Inspiration</p>
<hr>
</div>
</div>
<div class="section inspo">
<div class="grid">
<div class="inspo-content" id="apple">
<a href="https://youtu.be/GeoUELDgyM4" class="content-bg" target="_blank">
<p class="content-text">iPhone 7 ad</p>
<p class="sub-content-text">
I was inspired by the energy in this advertise and the way it blends text and imagery to reveal and inform the viewer of the product and its features.
</p>
<div class="click">
Click to view
</div>
</a>
</div>
<div class="inspo-content" id="google">
<a href="https://youtu.be/VXEkoXgb4bI" class="content-bg" target="_blank">
<p class="content-text">Google Allo ad</p>
<p class="sub-content-text">
I like the motion linked to the audio in this advertisement. It manages to convey what
the product is without the use of commentary.
</p>
<div class="click">
Click to view
</div>
</a>
</div>
<div class="inspo-content" id="vox">
<a href="https://youtu.be/95Tc0Rk2cNg" class="content-bg" target="_blank">
<p class="content-text">Hubble - Vox</p>
<p class="sub-content-text">
Vox takes serious subjects and uses animated overlays to convey it effectively. There is a good mixture of visual and
textual elements.</p>
<div class="click">
Click to view
</div>
</a>
</div>
<div class="inspo-content" id="kurz">
<a href="https://youtu.be/ao8L-0nSYzg" class="content-bg" target="_blank">
<p class="content-text">Addiction - Kurzgesagt</p>
<p class="sub-content-text">
I like the way Kurzgesagt uses an interesting aesthetic to explain complex ideas.
</p>
<div class="click">
Click to view
</div>
</a>
</div>
</div>
</div>
<div class="section">
<div class="subtitle">
<p>Narrative</p>
<hr>
</div>
</div>
<div class="section inspo">
<div class="grid">
<div class="inspo-content do-dont">Spot</div>
<div class="inspo-content">Spot is a mobile and augmented reality (AR) application that helps people strength train improve their form. The advertisement aims to inform the target audience (people who strength train) about the application and how it can improve their results. It opens with energetic music fading in with the Spot logo and the tagline ‘Real-time strength coaching appearing. The Spot appears by animating its outline and the tagline appears sequentially after that. <br><br>
The logo and text exit the frame to make way for the smartphone application and AR eyewear to come into view. The eyewear will be on the left and the application will be on the right of screen. The green background will slide to the left to hide the application and reveal a video. A short video showing a person using the eyewear in the gym will play. At appropriate points, text will appear to explain the features of the AR eyewear. Text will be accompanied by icons that animate in with it. <br><br>
The background will then slide to the right to hide the eye wear and video and re-reveal the application and a different video on the left-hand side. The video will then zoom into the application which will show its features. Text will animate in and accompany these interactions to explain each feature. <br><br>
Finally, the application will zoom out and the eyewear will slide into frame from the right to sit alongside it. Text and App Store/Google Play icons will appear and the music will fade out as the advertisement ends.
</div>
</div>
</div>
<div class="section">
<div class="subtitle">
<p>Storyboards</p>
<hr>
</div>
</div>
<div class="section">
<div class="slide" id="storyboard1"></div>
</div>
<div class="section">
<div class="slide" id="storyboard2"></div>
</div>
<div class="section">
<div class="subtitle">
<p>Elements</p>
<hr>
</div>
</div>
<div class="section inspo">
<div class="grid">
<div class="inspo-content do-dont">Vector Graphics</div>
<div class="inspo-content do-dont">Typography</div>
<div class="inspo-content do-dont">Audio</div>
<div class="inspo-content do-dont">Iconography</div>
</div>
</div>
<div class="section inspo">
<div class="grid">
<div class="inspo-content do-dont" id="spot-logo"></div>
<div class="inspo-content do-dont" id="spot">Training</div>
<div class="inspo-content do-dont" id="app"></div>
<div class="inspo-content do-dont" id="icon"></div>
</div>
</div>
<div class="section">
<div class="subtitle">
<p>Style frames</p>
<hr>
</div>
</div>
<div class="section">
<div class="slide" id="styleframe-in-1"></div>
</div>
<div class="section">
<div class="slide" id="styleframe-in-2"></div>
</div>
<div class="section">
<div class="slide" id="styleframe-in-3"></div>
</div>
<div class="section">
<div class="subtitle">
<p>Final Render</p>
<hr>
</div>
</div>
<div class="section motion-graphic">
<video autoplay class="video">
<source src="vid/Spot_2.mp4" type="video/mp4">
</video>
</div>
<div class="section fp-auto-height footer">
<a href="coffee.html" class="link-left">
<h1><i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
Coffee & Hexagons
</h1></a>
</div>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>