-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (64 loc) · 2.92 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
<!doctype html>
<html lang="tr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="webgl/css/main.css">
<script src="webgl/js/gsap.min.js"></script>
<script src="webgl/js/ScrollTrigger.min.js"></script>
<script src="webgl/js/pixi.js"></script>
<script src="webgl/js/pixi-spine.js"></script>
<script src="webgl/js/pixi-sound.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<section class="description panel black" id="panel-welcome">
<div>
<div class="perspective">
<div class="crawl">
<p>Episode IV
<strong>A NEW HOPE</strong>
</p>
<p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>
<p>During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.</p>
<p>Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy...</p>
</div>
</div>
</div>
</section>
<section id="wallpaper" class="panel wallpaper align-top">
<!-- <p id="gray-content">
<code>start: "top top"</code>
triggers when the orange element's
<strong>top edge</strong>
hits the
<strong>top</strong>
of the viewport.
<code>end: "bottom 150px"</code>
stops pinning when the
<strong>bottom</strong>
of the orange element hits
<strong>150px</strong>
down from the top of the viewport (measurements are relative to the top).
</p> -->
<div id="walking-man">
</div>
</section>
<section id="red" class="panel red align-top">
<p id="red-content">
<code>start: "top center"</code>
pins this element when the
<strong>top</strong>
of the red element hits the
<strong>center</strong>
of the viewport, and remains pinned for 200px because its
<code>end</code>
is defined as
<code>"+=200"</code>
</p>
</section>
<section class="panel purple">
Easy Peasy!
</section>
<script src="webgl/js/main.js"></script>
</body>
</html>