-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (159 loc) · 10.5 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ScrollMagic learning</title>
<link rel="stylesheet" href="assets/css/styles.css" />
</head>
<body>
<header>
<details>
<summary class="logo-sum" title="Made by Allenyade">
<svg
class="logo"
version="1.2"
baseProfile="tiny"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 1024 499.98"
overflow="visible"
xml:space="preserve"
width="48"
>
<g>
<polygon
points="1024,499.36 894.09,499.36 713.97,0 843.89,0 "
/>
<polygon
points="0,499.36 129.91,499.36 310.03,0 180.11,0 "
/>
<path
d="M584.39,0.15H439.61L259.49,499.51h126.67l36.45-100.97h175.53l36.45,100.97h129.91L584.39,0.15z M455.6,306.96
l54.78-151.8l54.79,151.8H455.6z"
/>
</g>
</svg>
</summary>
<ul>
<li>
<a href="//github.com/movva-gpu" title="Github">
<svg fill="#fff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="32" height="2">
<!-- From simpleicons -->
<title>GitHub</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
</a>
</li>
<li>
<a href="//mastodon.social/@allenyade" title="Mastodon">
<svg fill="#fff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<!-- From simpleicons -->
<title>Mastodon</title>
<path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
</svg>
</a>
</li>
<li>
<a href="//github.com/movva-gpu/ScrollMagic-Learning" title="Source">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M80 104a24 24 0 1 0 0-48 24 24 0 1 0 0 48zm80-24c0 32.8-19.7 61-48 73.3v87.8c18.8-10.9 40.7-17.1 64-17.1h96c35.3 0 64-28.7 64-64v-6.7C307.7 141 288 112.8 288 80c0-44.2 35.8-80 80-80s80 35.8 80 80c0 32.8-19.7 61-48 73.3V160c0 70.7-57.3 128-128 128H176c-35.3 0-64 28.7-64 64v6.7c28.3 12.3 48 40.5 48 73.3c0 44.2-35.8 80-80 80s-80-35.8-80-80c0-32.8 19.7-61 48-73.3V352 153.3C19.7 141 0 112.8 0 80C0 35.8 35.8 0 80 0s80 35.8 80 80zm232 0a24 24 0 1 0 -48 0 24 24 0 1 0 48 0zM80 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/>
</svg>
</a>
</li>
<li>
<a href="CREDITS.md" title="Credits">
<span class="line1"></span>
<span class="line2"></span>
<span class="line3"></span>
</a>
</li>
<li>
<a href="//projects.danyella.works" title="Retour">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/>
</svg>
</a>
</li>
</ul>
</details>
</header>
<main>
<section class="header">
<img class="hat" src="https://scrollmagic.io/assets/img/demo_tophat.png" alt="ScrollMagic logo">
<img class="duck" src="assets/img/rubber-duck.avif" width="128">
<h2>Learning <span class="scroll">ScrollMagic</span></h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dignissimos sunt numquam sapiente amet possimus. Eos, eius.
Corrupti praesentium autem, eius eligendi quam laudantium,
necessitatibus error fugit dignissimos doloremque
repudiandae est! Iusto sunt reiciendis corporis minima
quaerat optio eveniet numquam necessitatibus officia ad quod
nulla inventore libero quidem illum, sint error corrupti,
assumenda praesentium. Inventore optio pariatur dicta fugit
alias quaerat.
</p>
</section>
<div class="lower">
<section class="smaller sec2">
<h2>Section n°2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Totam qui voluptatem vitae, harum maiores illum beatae earum
laboriosam architecto cumque suscipit at dolore? Fugit
voluptatem iusto nihil magni beatae perspiciatis? Voluptas
unde omnis id fugiat amet qui quis? Ad, praesentium
repellendus. Accusantium quis magnam quam dolor odio iste,
est ut autem velit sed rem error rerum, commodi doloremque,
consequatur id!
</p>
</section>
<section class="smaller sec3">
<h2>Section n°3</h2>
<p>
<img src="https://picsum.photos/200/300.webp" alt="Placeholder" width="200" height="300">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et
fugit totam omnis voluptatum fuga suscipit ad culpa atque
laudantium aliquid eum minus modi impedit sint, perspiciatis
tempore. Et, suscipit quae? Dignissimos facilis atque
obcaecati nesciunt corrupti, hic molestias, blanditiis
debitis sequi vel amet beatae vero perspiciatis, labore
pariatur. Cum placeat vitae dignissimos cumque vel labore
consequuntur nobis eum minus sint.
</p>
</section>
</div>
<section class="parallax">
<div class="text">
<h2>Parallax</h2>
<small>A test</small>
</div>
<img src="//picsum.photos/2160/1600.webp" alt="Placeholder" title="Placeholder">
</section>
<section class="empty">Emptiness</section>
<section class="bottom">
Why are you here<span class="why">?</span><br>
.............<br>
......<br>
?..
<div class="spacer"></div>
</section>
</main>
<footer>
Made by Danyella Strikann • Project under MIT license
</footer>
<!-- #region scripts-->
<script src="libs/jquery-3.7.1.slim.min.js"></script>
<script src="libs/gsap.min.js"></script>
<script src="libs/ScrollMagic.min.js"></script>
<script src="libs/ScrollMagic_gsap.js"></script>
<!-- <script src="libs/debug.addIndicators.min.js"></script> -->
<script type="module" src="assets/js/main.js"></script>
<!-- #endregion -->
</body>
</html>