forked from DanielBerger1995/finalspec-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
385 lines (243 loc) · 24.8 KB
/
index.html
File metadata and controls
385 lines (243 loc) · 24.8 KB
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
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Parallax Example</title>
<link rel="stylesheet" href="danstyle.css">
<link rel="stylesheet" href="idastyle.css">
<link rel="stylesheet" href="oliverstyle.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Archivo+Black|Cinzel|Fredoka+One|Lobster|Odibee+Sans|Righteous|Vibes&display=swap" rel="stylesheet">
</head>
<body>
<!-- Progression bar -->
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<svg width="842" height="87" viewBox="0 0 842 87" fill="none" xmlns="http://www.w3.org/2000/svg" id='logo'>
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0" y="0" width="842" height="87" fill="white">
<rect fill="white" width="842" height="87"/>
<path d="M43.1365 2.66085V25.7348C41.3956 25.1417 40.0504 24.8451 39.1009 24.8451C37.2809 24.8451 35.7181 25.5173 34.4125 26.8618C33.1068 28.2063 32.454 29.8276 32.454 31.7257C32.454 33.3471 33.1662 35.4033 34.5905 37.8946L36.4303 41.0977C39.7537 46.8711 41.4154 52.4468 41.4154 57.8248C41.4154 65.6941 38.6063 72.3573 32.9881 77.8144C27.4095 83.2715 20.5846 86 12.5134 86C8.636 86 4.79822 85.1103 1 83.3308V59.9009C3.29476 61.364 5.33234 62.0956 7.11276 62.0956C9.20969 62.0956 10.9505 61.5024 12.3353 60.3161C13.7596 59.0903 14.4718 57.5678 14.4718 55.7488C14.4718 54.5625 13.3442 51.9723 11.089 47.9784C7.48863 41.6513 5.68843 35.3243 5.68843 28.9972C5.68843 21.3652 8.39862 14.8009 13.819 9.30426C19.2789 3.76809 25.7873 1 33.3442 1C36.6677 1 39.9318 1.55362 43.1365 2.66085Z"/>
<path d="M81.7715 55.986V34.7509C86.638 34.7509 89.0712 32.8923 89.0712 29.1752C89.0712 25.7744 87.2117 24.074 83.4926 24.074C79.7339 24.074 77.8546 26.4071 77.8546 31.0733V83.9833H53.7596V33.5645C53.7596 28.3447 54.274 24.074 55.3027 20.7523C56.3709 17.391 58.1711 14.267 60.7033 11.3803C63.5519 8.17725 67.1128 5.64643 71.3858 3.78786C75.6588 1.92929 80.0702 1 84.6202 1C92.8497 1 99.7537 3.76809 105.332 9.30426C110.951 14.8404 113.76 21.7013 113.76 29.887C113.76 37.8353 111.247 44.281 106.223 49.224C101.633 53.7716 94.7092 56.0454 85.451 56.0454L81.7715 55.986Z"/>
<path d="M166.994 34.5136V52.5457H151.267C149.131 52.5457 147.607 52.8621 146.697 53.4948C145.827 54.1275 145.392 55.1952 145.392 56.6978C145.392 58.3982 145.847 59.5252 146.757 60.0789C147.667 60.5929 149.526 60.85 152.335 60.85H168.537V83.9833H149.605C140.703 83.9833 133.898 81.8676 129.19 77.6364C124.482 73.3657 122.128 67.2166 122.128 59.1891V27.455C122.128 19.7043 124.343 13.6936 128.774 9.42289C133.245 5.15213 139.516 3.01675 147.588 3.01675H168.537V26.2687H153.166C149.012 26.2687 146.935 27.6132 146.935 30.3022C146.935 31.8839 147.429 32.9912 148.418 33.6239C149.408 34.217 151.168 34.5136 153.7 34.5136H166.994Z"/>
<path d="M237.202 44.4194L262.424 45.0719C260.763 58.1214 256.232 68.2052 248.834 75.3231C241.475 82.441 231.861 86 219.991 86C207.924 86 197.815 81.9665 189.665 73.8995C181.554 65.793 177.499 55.7488 177.499 43.7669C177.499 31.706 181.633 21.5629 189.902 13.3378C198.211 5.11258 208.438 1 220.585 1C232.533 1 242.503 5.0335 250.496 13.1005C256.035 18.6762 259.952 26.4466 262.246 36.4117L236.43 38.1319C233.542 29.274 228.062 24.8451 219.991 24.8451C214.848 24.8451 210.594 26.6246 207.231 30.1835C203.908 33.7425 202.246 38.2703 202.246 43.7669C202.246 49.0658 203.888 53.4552 207.172 56.9351C210.456 60.3754 214.61 62.0956 219.635 62.0956C224.739 62.0956 228.794 60.5732 231.801 57.5283C234.848 54.4834 236.648 50.1137 237.202 44.4194Z"/>
<path d="M297.914 3.01675V83.9833H273.819V3.01675H297.914Z"/>
<path d="M343.552 43.3517V64.7055H336.608V83.9833H312.513V32.4969C312.513 22.5318 315.224 14.8009 320.644 9.30426C326.104 3.76809 333.76 1 343.611 1C353.107 1 360.13 3.51105 364.68 8.53315C369.229 13.5157 371.504 21.2268 371.504 31.6664V83.9833H347.41V33.268C347.41 30.1044 347.034 27.9097 346.282 26.6839C345.53 25.458 344.185 24.8451 342.246 24.8451C338.488 24.8451 336.608 27.6527 336.608 33.268V43.3517H343.552Z"/>
<path d="M384.442 3.01675H408.537V51.1221C408.537 54.8788 409.131 57.3899 410.318 58.6553C411.544 59.8811 413.938 60.4941 417.499 60.4941H418.745V83.9833H412.335C403.552 83.9833 396.707 81.4327 391.801 76.3315C386.895 71.1907 384.442 64.0728 384.442 54.9777V3.01675Z"/>
<path d="M451.03 3.01675V83.9833H426.935V3.01675H451.03Z"/>
<path d="M505.332 2.66085V25.7348C503.592 25.1417 502.246 24.8451 501.297 24.8451C499.477 24.8451 497.914 25.5173 496.608 26.8618C495.303 28.2063 494.65 29.8276 494.65 31.7257C494.65 33.3471 495.362 35.4033 496.786 37.8946L498.626 41.0977C501.95 46.8711 503.611 52.4468 503.611 57.8248C503.611 65.6941 500.802 72.3573 495.184 77.8144C489.605 83.2715 482.78 86 474.709 86C470.832 86 466.994 85.1103 463.196 83.3308V59.9009C465.491 61.364 467.528 62.0956 469.309 62.0956C471.406 62.0956 473.146 61.5024 474.531 60.3161C475.956 59.0903 476.668 57.5678 476.668 55.7488C476.668 54.5625 475.54 51.9723 473.285 47.9784C469.684 41.6513 467.884 35.3243 467.884 28.9972C467.884 21.3652 470.594 14.8009 476.015 9.30426C481.475 3.76809 487.983 1 495.54 1C498.864 1 502.128 1.55362 505.332 2.66085Z"/>
<path d="M546.994 43.3517V64.7055H540.05V83.9833H515.956V32.4969C515.956 22.5318 518.666 14.8009 524.086 9.30426C529.546 3.76809 537.202 1 547.053 1C556.549 1 563.572 3.51105 568.122 8.53315C572.672 13.5157 574.947 21.2268 574.947 31.6664V83.9833H550.852V33.268C550.852 30.1044 550.476 27.9097 549.724 26.6839C548.972 25.458 547.627 24.8451 545.688 24.8451C541.93 24.8451 540.05 27.6527 540.05 33.268V43.3517H546.994Z"/>
<path d="M624.798 26.2687V83.9833H600.703V26.2687H582.246V3.01675H643.196V26.2687H624.798Z"/>
<path d="M676.193 3.01675V83.9833H652.098V3.01675H676.193Z"/>
<path d="M730.852 1C742.325 1 752.157 5.1719 760.347 13.5157C768.577 21.8595 772.691 31.8444 772.691 43.4703C772.691 55.294 768.557 65.3382 760.288 73.6029C752.019 81.8676 741.969 86 730.139 86C718.389 86 708.359 81.8479 700.05 73.5436C691.742 65.2394 687.588 55.2149 687.588 43.4703C687.588 31.6071 691.762 21.5629 700.11 13.3378C708.498 5.11258 718.745 1 730.852 1ZM730.139 24.8451C725.194 24.8451 720.98 26.6641 717.499 30.3022C714.017 33.9402 712.276 38.3296 712.276 43.4703C712.276 48.6111 714.017 53.0005 717.499 56.6385C721.02 60.2766 725.233 62.0956 730.139 62.0956C735.125 62.0956 739.338 60.2963 742.78 56.6978C746.262 53.0598 748.003 48.6506 748.003 43.4703C748.003 38.2901 746.262 33.9007 742.78 30.3022C739.338 26.6641 735.125 24.8451 730.139 24.8451Z"/>
<path d="M782.424 83.9833V31.4292C782.424 22.2154 785.174 14.8404 790.674 9.30426C796.213 3.76809 803.572 1 812.751 1C821.89 1 828.873 3.689 833.7 9.06699C838.567 14.445 841 22.1759 841 32.2596V83.9833H816.905V32.2596C816.905 27.3166 815.144 24.8451 811.623 24.8451C808.221 24.8451 806.519 27.3166 806.519 32.2596V83.9833H782.424Z"/>
</mask>
<path d="M43.1365 2.66085V25.7348C41.3956 25.1417 40.0504 24.8451 39.1009 24.8451C37.2809 24.8451 35.7181 25.5173 34.4125 26.8618C33.1068 28.2063 32.454 29.8276 32.454 31.7257C32.454 33.3471 33.1662 35.4033 34.5905 37.8946L36.4303 41.0977C39.7537 46.8711 41.4154 52.4468 41.4154 57.8248C41.4154 65.6941 38.6063 72.3573 32.9881 77.8144C27.4095 83.2715 20.5846 86 12.5134 86C8.636 86 4.79822 85.1103 1 83.3308V59.9009C3.29476 61.364 5.33234 62.0956 7.11276 62.0956C9.20969 62.0956 10.9505 61.5024 12.3353 60.3161C13.7596 59.0903 14.4718 57.5678 14.4718 55.7488C14.4718 54.5625 13.3442 51.9723 11.089 47.9784C7.48863 41.6513 5.68843 35.3243 5.68843 28.9972C5.68843 21.3652 8.39862 14.8009 13.819 9.30426C19.2789 3.76809 25.7873 1 33.3442 1C36.6677 1 39.9318 1.55362 43.1365 2.66085Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M81.7715 55.986V34.7509C86.638 34.7509 89.0712 32.8923 89.0712 29.1752C89.0712 25.7744 87.2117 24.074 83.4926 24.074C79.7339 24.074 77.8546 26.4071 77.8546 31.0733V83.9833H53.7596V33.5645C53.7596 28.3447 54.274 24.074 55.3027 20.7523C56.3709 17.391 58.1711 14.267 60.7033 11.3803C63.5519 8.17725 67.1128 5.64643 71.3858 3.78786C75.6588 1.92929 80.0702 1 84.6202 1C92.8497 1 99.7537 3.76809 105.332 9.30426C110.951 14.8404 113.76 21.7013 113.76 29.887C113.76 37.8353 111.247 44.281 106.223 49.224C101.633 53.7716 94.7092 56.0454 85.451 56.0454L81.7715 55.986Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M166.994 34.5136V52.5457H151.267C149.131 52.5457 147.607 52.8621 146.697 53.4948C145.827 54.1275 145.392 55.1952 145.392 56.6978C145.392 58.3982 145.847 59.5252 146.757 60.0789C147.667 60.5929 149.526 60.85 152.335 60.85H168.537V83.9833H149.605C140.703 83.9833 133.898 81.8676 129.19 77.6364C124.482 73.3657 122.128 67.2166 122.128 59.1891V27.455C122.128 19.7043 124.343 13.6936 128.774 9.42289C133.245 5.15213 139.516 3.01675 147.588 3.01675H168.537V26.2687H153.166C149.012 26.2687 146.935 27.6132 146.935 30.3022C146.935 31.8839 147.429 32.9912 148.418 33.6239C149.408 34.217 151.168 34.5136 153.7 34.5136H166.994Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M237.202 44.4194L262.424 45.0719C260.763 58.1214 256.232 68.2052 248.834 75.3231C241.475 82.441 231.861 86 219.991 86C207.924 86 197.815 81.9665 189.665 73.8995C181.554 65.793 177.499 55.7488 177.499 43.7669C177.499 31.706 181.633 21.5629 189.902 13.3378C198.211 5.11258 208.438 1 220.585 1C232.533 1 242.503 5.0335 250.496 13.1005C256.035 18.6762 259.952 26.4466 262.246 36.4117L236.43 38.1319C233.542 29.274 228.062 24.8451 219.991 24.8451C214.848 24.8451 210.594 26.6246 207.231 30.1835C203.908 33.7425 202.246 38.2703 202.246 43.7669C202.246 49.0658 203.888 53.4552 207.172 56.9351C210.456 60.3754 214.61 62.0956 219.635 62.0956C224.739 62.0956 228.794 60.5732 231.801 57.5283C234.848 54.4834 236.648 50.1137 237.202 44.4194Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M297.914 3.01675V83.9833H273.819V3.01675H297.914Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M343.552 43.3517V64.7055H336.608V83.9833H312.513V32.4969C312.513 22.5318 315.224 14.8009 320.644 9.30426C326.104 3.76809 333.76 1 343.611 1C353.107 1 360.13 3.51105 364.68 8.53315C369.229 13.5157 371.504 21.2268 371.504 31.6664V83.9833H347.41V33.268C347.41 30.1044 347.034 27.9097 346.282 26.6839C345.53 25.458 344.185 24.8451 342.246 24.8451C338.488 24.8451 336.608 27.6527 336.608 33.268V43.3517H343.552Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M384.442 3.01675H408.537V51.1221C408.537 54.8788 409.131 57.3899 410.318 58.6553C411.544 59.8811 413.938 60.4941 417.499 60.4941H418.745V83.9833H412.335C403.552 83.9833 396.707 81.4327 391.801 76.3315C386.895 71.1907 384.442 64.0728 384.442 54.9777V3.01675Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M451.03 3.01675V83.9833H426.935V3.01675H451.03Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M505.332 2.66085V25.7348C503.592 25.1417 502.246 24.8451 501.297 24.8451C499.477 24.8451 497.914 25.5173 496.608 26.8618C495.303 28.2063 494.65 29.8276 494.65 31.7257C494.65 33.3471 495.362 35.4033 496.786 37.8946L498.626 41.0977C501.95 46.8711 503.611 52.4468 503.611 57.8248C503.611 65.6941 500.802 72.3573 495.184 77.8144C489.605 83.2715 482.78 86 474.709 86C470.832 86 466.994 85.1103 463.196 83.3308V59.9009C465.491 61.364 467.528 62.0956 469.309 62.0956C471.406 62.0956 473.146 61.5024 474.531 60.3161C475.956 59.0903 476.668 57.5678 476.668 55.7488C476.668 54.5625 475.54 51.9723 473.285 47.9784C469.684 41.6513 467.884 35.3243 467.884 28.9972C467.884 21.3652 470.594 14.8009 476.015 9.30426C481.475 3.76809 487.983 1 495.54 1C498.864 1 502.128 1.55362 505.332 2.66085Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M546.994 43.3517V64.7055H540.05V83.9833H515.956V32.4969C515.956 22.5318 518.666 14.8009 524.086 9.30426C529.546 3.76809 537.202 1 547.053 1C556.549 1 563.572 3.51105 568.122 8.53315C572.672 13.5157 574.947 21.2268 574.947 31.6664V83.9833H550.852V33.268C550.852 30.1044 550.476 27.9097 549.724 26.6839C548.972 25.458 547.627 24.8451 545.688 24.8451C541.93 24.8451 540.05 27.6527 540.05 33.268V43.3517H546.994Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M624.798 26.2687V83.9833H600.703V26.2687H582.246V3.01675H643.196V26.2687H624.798Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M676.193 3.01675V83.9833H652.098V3.01675H676.193Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M730.852 1C742.325 1 752.157 5.1719 760.347 13.5157C768.577 21.8595 772.691 31.8444 772.691 43.4703C772.691 55.294 768.557 65.3382 760.288 73.6029C752.019 81.8676 741.969 86 730.139 86C718.389 86 708.359 81.8479 700.05 73.5436C691.742 65.2394 687.588 55.2149 687.588 43.4703C687.588 31.6071 691.762 21.5629 700.11 13.3378C708.498 5.11258 718.745 1 730.852 1ZM730.139 24.8451C725.194 24.8451 720.98 26.6641 717.499 30.3022C714.017 33.9402 712.276 38.3296 712.276 43.4703C712.276 48.6111 714.017 53.0005 717.499 56.6385C721.02 60.2766 725.233 62.0956 730.139 62.0956C735.125 62.0956 739.338 60.2963 742.78 56.6978C746.262 53.0598 748.003 48.6506 748.003 43.4703C748.003 38.2901 746.262 33.9007 742.78 30.3022C739.338 26.6641 735.125 24.8451 730.139 24.8451Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
<path d="M782.424 83.9833V31.4292C782.424 22.2154 785.174 14.8404 790.674 9.30426C796.213 3.76809 803.572 1 812.751 1C821.89 1 828.873 3.689 833.7 9.06699C838.567 14.445 841 22.1759 841 32.2596V83.9833H816.905V32.2596C816.905 27.3166 815.144 24.8451 811.623 24.8451C808.221 24.8451 806.519 27.3166 806.519 32.2596V83.9833H782.424Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1)"/>
</svg>
<div class="dantitle"><h2>IMMERSIVE UX DESIGN</h2></div>
<br>
<div class="titletxt">
We as a group, feel that visuals are one of the most important tools that can be used as a designer, to really capture the attention of your audience, and make their journey meaningful and memorable.
</div>
<!-- Parallax scrolling mountains -->
<div class="parallax-container">
<div class="parallax-layer layer-0" data-parallax-speed="0.05" data-max-scroll="565"></div>
<div class="parallax-layer layer-6" data-parallax-speed="0.1" data-max-scroll="565"></div>
<div class="parallax-layer layer-5" data-parallax-speed="0.2" data-max-scroll="565"></div>
<div class="parallax-layer layer-4" data-parallax-speed="0.3" data-max-scroll="565"></div>
<div class="parallax-layer layer-1" data-parallax-speed="0.4" data-max-scroll="565"></div>
<div class="parallax-layer layer-2" data-parallax-speed="0.5" data-max-scroll="565"></div>
<div class="parallax-layer layer-3" data-parallax-speed="0.6" data-max-scroll="565"></div>
</div>
<img src="images/layer1.png" alt="" class="layer1">
<!-- ======================= -->
<!-- Here the content starts -->
<!-- ======================= -->
<div class="content">
<section class="article">
<div class="scroll" data-aos="fade-right" data-aos-duration="2000">
<img src="images/puppy.JPG" class="art_img">
</div>
<div class="art_content">
<h1 class="art_head" data-aos="fade-down" data-aos-duration="600">What is parallax scrolling?</h1>
<p class="art_text" data-aos="zoom-in" data-aos-duration="600">The parallax effect have become a trend in the web design world. The effect is now commonly seen as part of the scrolling feature of a web page.
It uses multiple backgrounds which seem to move at different speeds to create a sensation of depth (creating a faux-3D effect) and an interesting browsing experience.
<br><br> Oh, this is just a picture of a puppy, isnt is just super cute! (i couldnt resist)
</p>
</div>
</section>
<section>
<div class="parallax-wrapper">
<div class="background background-one">
<h2 class="title" data-aos="flip-up" data-aos-duration="700">This is parallax!</h2>
</div>
<section class="box">
<div class="desc-wrapper">
<h3 class="season--title">Show pictures <br><br>to draw attention</h3>
<p class="season--about">
Finding the right imagery for your site and using it appropriately has the potential to increase traffic. And more traffic on your site can lead to more business.
<br><br>
And write something cool here, not like Lorem ipsum, thats lame, write about... cool stuff, like... Ferraris! Yes keep on scrolling, there is still more to discover</p>
</div>
</section>
<div class="background background-two">
<h2 class="title2">Ferrari F458</h2>
</div>
</div>
</section>
<section class="article_two">
<div class="scroll" data-aos="zoom-in" data-aos-duration="2000" data-aos-delay="500">
<img src="images/apple.png" class="art_img">
</div>
<div class="art_content">
<h1 class="art_head" data-aos="zoom-in" data-aos-duration="600">Use of good animation</h1>
<p class="art_text" data-aos-duration="200">Duration and speed of the animation is crucial! When elements change their state or position, the duration of the animation should be slow enough to give users the possibility to notice the change, but at the same time quick enough not to cause waiting.
<br> If you want to know more about optimizing your animations, this <a href="https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9">website</a> has some good points.
<br><br>
One apple a day, keeps the doctor away #VeryCliche. Well that is not even the point... just scroll God Dammit!</p>
</div>
</section>
<div class="all">
<div class="notodo">
<h3 class="not1" data-aos="slide-up" data-aos-mirror="true">WHAT</h3>
<h3 class="not2" data-aos="slide-up" data-aos-mirror="true" data-aos-delay="200">NOT</h3>
<h3 class="not3" data-aos="slide-up" data-aos-mirror="true" data-aos-delay="400">TO</h3>
<h3 class="not4" data-aos="slide-up" data-aos-mirror="true" data-aos-delay="600">DO</h3>
</div>
<div class="badtext">
<div data-aos="num" data-aos-mirror="true" class="num">01</div>
<div class="a1" data-aos="a1" data-aos-mirror="true" data-aos-delay="200">DON'T</div>
<div class="a2" data-aos="a2" data-aos-mirror="true" data-aos-delay="400">CREATE</div>
<div class="a3" data-aos="a3" data-aos-mirror="true" data-aos-delay="600">UNNECESSARY</div>
<div class="a4" data-aos="a4" data-aos-mirror="true" data-aos-delay="800" id="triggerballs">DISTRACTIONS</div>
<div class="allballs" data-aos-anchor="#triggerballs"
data-aos-anchor-placement="top-center" data-aos="balls">
<div class="reballs">
</div>
</div>
<p class="motion" data-aos="motion" data-aos-mirror="true" data-aos-delay="1000" >
Motion directs attention, thus we don’t want to create scrolling effects that will distract users from focusing on what they should be focusing on the screen. If a motion creates a distraction from the target content, it’s not the best place for scrolling effects.
</p>
</div>
<div class="badtext">
<div class="a6"data-aos="a6" data-aos-mirror="true" id="triggertext">02</div>
<div class="a7" data-aos="a7" data-aos-mirror="true" data-aos-duration="1250" >DON'T</div>
<div class="a8" data-aos="a8" data-aos-mirror="true" data-aos-duration="1000" >FORGET</div>
<div class="a9" data-aos="a9" data-aos-mirror="true" data-aos-duration="750">THE</div>
<div class="a10" data-aos="a10" data-aos-mirror="true" data-aos-duration="500">BRAND</div>
<div class="a11" data-aos="a11" data-aos-mirror="true">IDENTITY</div>
<p class="identity" data-aos="identity" data-aos-mirror="true" data-aos-anchor="#triggertext"
data-aos-anchor-placement="center-center">
Motion adds characters to the design. To create a coherent experience browsing the web, we should try not to include effects that express a different feel and brand. For example, elements bouncing into the page might not add value to a serious business website.
</p>
</div>
<div class="badtext">
<div class="a12" data-aos="a12" data-aos-mirror="true" data-aos-duration="1050" >03</div>
<div class="a13" data-aos="a13" data-aos-mirror="true">LESS</div>
<div class="a14" data-aos="a14" data-aos-mirror="true" data-aos-duration="1050">IS</div>
<div class="a15" data-aos="a15" data-aos-mirror="true" data-aos-duration="1050">MORE</div>
<p class="less" data-aos="less" data-aos-mirror="true" data-aos-duration="1050">
Less is more is still valid here. When everything on the screen moves around and changes shapes, it might be worse than having no motion at all. Try not to use too much motion and effects on the same screen and too many different kinds of effects on the same webpage.
</p>
</div>
<div class="carwheel">
<img src="images/wheel.png" alt="" id="item0" class="wheel">
<p class="wheeltxt" data-aos="a16" data-aos-mirror="true">Now "On scroll animations" don't just have to be limited to text or images, they can also bring life to objects your audiences meets along their way. It help them feel more involved almost as if they are watching a movie or playing a game.</p>
</div>
<div class="carcontainer" id="item1">
<p>VRROOOOOOOM</p>
<div class="car">
<img src="images/car1.png" alt="" class="car1">
</div>
</div>
</div>
<!-- OLI -->
<section class="oliver_section">
<article>
<figure class="oliverfigure">
<img src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fblogs-images.forbes.com%2Fforbestechcouncil%2Ffiles%2F2019%2F01%2Fcanva-photo-editor-8-7.jpg' class="oliverimg1" />
</figure>
<section class="oliversection">
<div>
<h1>IMMERSIVE<br><span class="hollow">WEBSITE</span><br>EFFECTS</h1>
</div>
</section>
<figure class="oliverfigure">
<a href="alaska.html">
<img src="Screenshot%202019-11-17%20at%2020.10.22.png" class="oliverimg2" /></a>
</figure>
<section class="oliversection" id="oliversection1">
<div>
<h2>Scrolling video</h2>
<p>A smart effect, that allows the user to control a video via scrolling. This engages the user, and makes for a fun and interactive website. Two key elements when attracting a customer e.g.</p>
</div>
</section>
<figure class="oliverfigure">
<a href="iphone.html"><img src='https://www.mbit.pt/pub/media/catalog/product/cache/afad95d7734d2fa6d0a8ba78597182b7/i/m/img_g_26e8104ac6f58fa0b2285cac6cc50601.png' class="oliverimg3" /></a>
</figure>
<section class="oliversection">
<div>
<h2 class="explosion">Exploding view</h2>
<p>A modern way of showing a product.
It works well for companies that are producing phones, cars etc.
The user has full control of the animation via scrolling.
A perfect example of using this is Apple with their new Macbook.</p>
</div>
</section>
</article>
</section>
</div>
<script src="parallax.js"></script>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script> AOS.init(); </script>
<script>
var leftItem = document.getElementById('item0');
var carItem = document.getElementById('item1');
;(function(){
var throttle = function(type, name, obj){
var obj = obj || window;
var running = false;
var func = function(){
if (running){ return; }
running = true;
requestAnimationFrame(function(){
obj.dispatchEvent(new CustomEvent(name));
running = false;
});
};
obj.addEventListener(type, func);
};
throttle("scroll", "optimizedScroll");
})();
window.addEventListener("optimizedScroll", function(){
leftItem.style.transform = "rotate(-" + window.pageYOffset + "deg)";
carItem.style.transform = "translateX(" + window.pageYOffset/0.6 + "px)";
})
</script>
</body></html>