-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
92 lines (86 loc) · 3.58 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A320-airplane | Magamed</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="content">
<div class="loading">Loading</div>
<div class="trigger"></div>
<div class="section">
<h1>Airplanes.</h1>
<h3>The beginners guide.</h3>
<p>You've probably forgotten what these are.</p>
<!-- <div class="phonetic">/ ˈɛərˌpleɪn /</div> -->
<div class="scroll-cta">Scroll</div>
</div>
<div class="section right">
<h2>They're kinda like buses...</h2>
</div>
<div class="ground-container">
<div class="parallax ground"></div>
<div class="section right">
<h2>..except they leave the ground.</h2>
<p>Saaay what!?.</p>
</div>
<div class="section">
<h2>They fly through the sky.</h2>
<p>For realsies!</p>
</div>
<div class="section right">
<h2>Defying all known physical laws.</h2>
<p>It's actual magic!</p>
</div>
<div class="parallax clouds"></div>
</div>
<div class="blueprint">
<svg width="100%" height="100%" viewbox="0 0 100 100">
<line id="line-length" x1="10" y1="80" x2="90" y2="80" stroke-width="0.5"></line>
<path id="line-wingspan" d="M10 50, L40 35, M60 35 L90 50" stroke-width="0.5"></path>
<circle id="circle-phalange" cx="60" cy="60" r="15" fill="transparent" stroke-width="0.5"></circle>
</svg>
<div class="section dark ">
<h2>The facts and figures.</h2>
<p>Lets get into the nitty gritty...</p>
</div>
<div class="section dark length">
<h2>Length.</h2>
<p>Long.</p>
</div>
<div class="section dark wingspan">
<h2>Wing Span.</h2>
<p>I dunno, longer than a cat probably.</p>
</div>
<div class="section dark phalange">
<h2>Left Phalange</h2>
<p>Missing</p>
</div>
<div class="section dark">
<h2>Engines</h2>
<p>Turbine funtime</p>
</div>
<!-- <div class="section"></div> -->
</div>
<div class="sunset">
<div class="section"></div>
<div class="section end">
<h2>Fin.</h2>
<ul class="credits">
<li>Plane model by <a href="https://poly.google.com/view/8ciDd9k8wha" target="_blank">Google</a></li>
<li>Animated using <a href="https://greensock.com/scrolltrigger/" target="_blank">GSAP ScrollTrigger</a></li>
</ul>
</div>
</div>
</div>
<!-- partial -->
<script src='https://codepen.io/ste-vg/pen/zBVaZw.js'></script>
<script src='https://unpkg.com/three@0.117.1/build/three.min.js'></script>
<script src='https://unpkg.com/three@0.117.1/examples/js/loaders/OBJLoader.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js'></script><script src="script.js"></script>
</body>
</html>