-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (94 loc) · 5.17 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
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="Parallax Scroll" />
<meta property="og:image" content="https://emjose.github.io/parallax-scroll/Assets/meta-017-ironman.png" />
<meta property="og:image:alt"
content="The Marvel character Iron Man flying through a city landscape. Click to visit website." />
<meta property="og:description" content="Project by Emmanuel Jose" />
<meta property="og:url" content="https://emjose.github.io/parallax-scroll/" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta name="description" content="A parallax scroll demo with Iron Man. Click to visit website." />
<meta name="theme-color" content="#052238" />
<meta name="keywords" content="HTML, CSS, JavaScript, parallax, ironman, iron man, marvel" />
<meta name="author" content="Emmanuel Jose" />
<title>Parallax Scroll</title>
<link rel="icon" type="image/png" href="Assets/emmanuel-jose.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="Assets/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="Assets/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="Assets/favicon-16x16.png" />
<link rel="manifest" href="manifest.webmanifest" />
<link rel="canonical" href="https://emjose.github.io/parallax-scroll/" />
<link rel="stylesheet" href="style.css" class="stylesheet" />
</head>
<body>
<section>
<img src="images/bg.jpg" id="bg" alt="building skyline" />
<img src="images/moon.png" id="moon" alt="full moon" />
<img src="images/cloud1.png" id="cloud1" alt="clouds" />
<img src="images/cloud2.png" id="cloud2" alt="clouds" />
<img src="images/jet.png" id="jet" alt="flying Avengers jet" />
<img src="images/ironman07.png" id="ironman" alt="flying ironman" />
</section>
<div class="sec">
<div class="content">
<h2>
<span id="text">I AM IRON MAN</span>
</h2>
<p>
<span id="text">Everybody wants a happy ending, right? But it doesn't always roll that way. Maybe
this time.
I'm hoping if you play this back... it's in celebration. I hope families are reunited. I hope we
get it back and something like a normal version of the planet has been restored, if there ever
was such a thing.</span>
</p>
<br />
<p>
<span id="text">God, what a world. Universe now. If you told me ten years ago that we weren't alone,
let alone
you know to this extent... I mean, I wouldn't have been surprised. But come on, you know. That
epic forces of darkness and light that have come into play. And for better or worse, that's the
reality Morgan's gonna have to find a way to grow up in. So I thought I better record a little
greeting, in the case of an untimely death, on my part. Not that death at any time is ever
timely.</span>
</p>
<br />
<p>
<span id="text">This time travel thing that we're gonna try and pull off tomorrow... it's got me
scratching my
head about the survivability of all this. But then again that's the hero gig. Part of the
journey is the end. What am I even tripping for? Everything is going to work out exactly the way
it's supposed to.</span>
</p>
<br />
<p>
<span id="last-line">I love you 3000.</span>
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script>
<script src="script.js"></script>
<div class="overlay">
<a href="https://github.com/emjose/parallax-scroll/#header" target="_blank" rel="noopener noreferrer"
class="github-corner" title="View source on GitHub" aria-label="View source on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250"
style="fill: var(--github-fill); color: var(--github-color); position: absolute; top: 0; border: 0; right: 0"
aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px" class="octo-arm"></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
</div>
</body>
</html>
<!-- Emmanuel Jose logo and favicon. © Emmanuel Jose. All Rights Reserved. -->