-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
228 lines (223 loc) · 13.8 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
<title>Scroll Page Watcher (CSS Only)</title>
<link rel="stylesheet" href="./css/index.css">
<script type="module" src="./js/index.js"></script>
</head>
<body id="top">
<a href="#main-content" class="element-invisible element-focusable skip-link">Skip to main content</a>
<form id="theme-picker" class="theme-picker">
<button type="button" id="btn-theme-toggle" class="btn-theme-toggle" aria-pressed>
<svg role="img" class="theme-icon" id="theme-darkmode">
<use href="./img/sprite.svg#moon"></use>
</svg>
<svg role="img" class="theme-icon hide" id="theme-lightmode">
<use href="./img/sprite.svg#sun"></use>
</svg>
<span>Dark Mode:</span> <span id="mode" class="mode"></span>
<span class="btn-theme-state" aria-hidden="true"></span>
</button>
</form>
<div class="page-layout">
<header class="page-header">
<svg role="img" class="icon icon-logo">
<use href="./img/sprite.svg#icon-logo"></use>
</svg>
<h1>Scroll Page Watcher (CSS Only)</h1>
</header>
<main id="main-content" class="main">
<h2 class="article-header">Scroll Page to See Effect</h2>
<h3>If your browser supports <code>animation-timeline: scroll()</code> CSS:</h3>
<p>A horizontal line will appear at the top of the
screen as you scroll, indicating how far you have travelled down the page.</p>
<h3>If it doesn't:</h3>
<p>The line will not appear.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo deleniti dignissimos esse debitis!
Culpa,
fugit odit facilis ipsam minus labore laboriosam error nemo voluptates, non quo magnam ducimus
consequuntur
ut
adipisci maxime quia optio? Illo necessitatibus minus dicta quis molestiae? Libero rem reprehenderit,
aliquam
cum repudiandae quo error earum eligendi provident praesentium, doloremque nobis impedit illum officiis
nihil?
Quasi, natus aliquam labore, ex praesentium ullam commodi, laborum voluptatem fugiat vel temporibus
perspiciatis
quidem hic pariatur iure? Dolorum adipisci libero quisquam atque quasi nam nulla nobis veritatis, aut
animi
commodi nostrum perferendis laudantium deleniti vitae magni velit enim possimus neque tempore tenetur
ipsum
distinctio. Aspernatur, veniam reprehenderit illum cum provident maiores sit ad ut rem fuga labore neque
repellendus officia earum, deleniti quidem est laborum ducimus accusantium perferendis quam! Eaque optio
nostrum
beatae pariatur impedit quam, eius nesciunt corrupti animi est tempora tempore reiciendis dicta hic
consequatur
minima harum? Voluptatum dolore sed harum ex odio error sunt quis debitis! Perspiciatis odit, excepturi
animi
labore aperiam voluptatem similique aliquam iste delectus, tempore adipisci corrupti, aspernatur natus?
Nulla
vel earum quas quod ea aperiam molestiae rerum reiciendis optio molestias obcaecati provident quaerat
incidunt
dicta accusantium, rem consectetur nihil explicabo aliquam hic at assumenda delectus. Optio maiores
reprehenderit numquam! Quidem eius, sed impedit quaerat non iusto nostrum? Distinctio expedita similique
earum
totam, excepturi nihil. Labore dignissimos architecto, dicta error consequuntur eaque maxime ducimus
nobis
sit
molestiae quas a rerum nam. Blanditiis sapiente cum molestias aliquam, voluptas qui pariatur amet,
magnam
aperiam alias commodi? Incidunt assumenda qui, facere excepturi doloribus facilis tempore nostrum quos!
Aspernatur nesciunt at tempora soluta corrupti ullam excepturi nam totam ipsam unde recusandae possimus,
placeat
perspiciatis quidem voluptatum iure neque nihil error asperiores sit adipisci. Nulla repellat unde
facere ad
sunt rerum a earum omnis? Quis ducimus magni inventore! Eum, quo.</p>
<p>Maiores dolorem adipisci nulla, voluptatum soluta eligendi iusto amet. Quam, pariatur ipsum aut
necessitatibus
at, totam neque unde aperiam laboriosam nesciunt, veniam harum. Officia aut nam quam voluptatum. Sunt,
nam!
Molestias voluptatum iure beatae voluptate architecto eaque, quia et dolores ipsa labore explicabo
voluptas
ut
error. Sunt porro expedita blanditiis libero est fuga quas possimus, laboriosam iure obcaecati dolorem
eaque
ipsa quia et explicabo aliquam eius quo, aut at. Harum officia ipsam perferendis, voluptas distinctio
eaque
quisquam obcaecati. Unde eligendi quos obcaecati voluptate ex accusantium eum perferendis architecto
laudantium
commodi quae, tempora placeat saepe esse, accusamus laborum, illum molestias corporis aliquam fugit modi
ratione? Quasi eaque doloremque impedit. Laborum tempora possimus incidunt! Excepturi ad velit
recusandae
quae
voluptate nobis ullam est neque. Reprehenderit magnam culpa, adipisci dolor id repellat possimus cum
quos
dicta
nesciunt voluptas vitae fuga dignissimos eligendi laboriosam reiciendis aut optio delectus rem quo? Ex
veniam
voluptate accusantium obcaecati sit. Ad laudantium exercitationem earum, totam, facere amet excepturi
cupiditate
ipsa quisquam deleniti perferendis quae dolores explicabo. Alias consequatur quaerat ipsum iusto rerum
placeat,
sed laboriosam vero quas ad eaque veritatis numquam tempore omnis est libero laudantium iste eligendi
explicabo.
Veniam, eveniet iure, quod soluta totam voluptatibus molestiae distinctio laborum, assumenda nesciunt
vero
rem?
Voluptates atque cum asperiores quia quas obcaecati eos aliquid, cupiditate et rerum aperiam distinctio
earum,
vitae perspiciatis iste deleniti eius esse inventore repudiandae commodi sapiente placeat molestias.
Praesentium
obcaecati reprehenderit, excepturi amet in itaque nam alias velit, iste unde dolore quod, soluta odio
neque.
Accusantium totam expedita possimus hic, officiis deserunt omnis cupiditate ipsa eligendi animi unde
vero
veritatis ullam quas. Odio consequatur ullam dolores nobis laudantium quam unde saepe vero deserunt
omnis,
totam
distinctio perferendis quod voluptatum? Quaerat excepturi, minus sit mollitia minima consequuntur
voluptates,
rem alias ipsum obcaecati officia quos aliquam magnam similique!</p>
<p>Eveniet facere odit necessitatibus culpa, delectus officia animi ipsa voluptatum quidem accusamus
accusantium
assumenda harum nihil earum. Eius quo officiis nobis repudiandae possimus cumque corporis iusto corrupti
sapiente inventore dolorem earum magni quae, soluta minima dicta enim quas reiciendis iste odit dolorum
debitis
delectus? Quisquam inventore officia possimus facilis ullam assumenda aliquam fugiat doloribus? Omnis,
praesentium expedita. Nulla ducimus, ratione voluptatum quis, ipsum sunt cupiditate magni magnam totam
repellat
impedit. Doloribus tenetur nisi molestias, fuga unde, maiores obcaecati non corrupti rem, praesentium
dolorum
ex. Sint assumenda corporis, fuga dolorum, deserunt modi distinctio blanditiis dolore obcaecati
necessitatibus
iusto quas quaerat! Blanditiis quibusdam rem, accusantium dolorem illo vel reiciendis minima error unde
consequuntur repellendus consequatur sunt explicabo earum laborum quaerat officiis. Recusandae ab
corporis
error
fugit tempora laborum quae veritatis nesciunt iusto, quidem vel facilis voluptatem sapiente molestiae id
rerum
provident sunt similique. Nam accusantium impedit voluptatem aliquid facere suscipit, omnis sequi libero
culpa
quasi consequuntur inventore, eos minima aspernatur? Unde omnis sit culpa esse reiciendis repudiandae
eos
aliquid, iure quis molestiae perspiciatis nam. At possimus quia quidem molestiae, culpa sequi laboriosam
sed
provident sit tempora voluptatibus dolore debitis perferendis odit impedit pariatur similique, eligendi
ipsa
voluptate, quaerat quam consequatur eos iure! Quibusdam, repudiandae distinctio nostrum consequuntur
saepe
praesentium repellendus? Cupiditate, autem tempora deserunt quaerat reiciendis reprehenderit? Numquam ad
reiciendis inventore officiis odit, sapiente aliquam iure possimus unde sit, incidunt beatae ipsum odio
ducimus
quam debitis, velit officia facere magni vero? Ut, facilis quia. Aut, aliquam velit blanditiis vitae
ratione,
laborum iste maiores, unde ex minus ad consequatur tenetur at pariatur officia officiis nobis cumque
quae.
Fugit
nihil, ipsa dolores vero nam odit fuga, recusandae, necessitatibus officiis voluptatum dolorem
voluptatibus
iste
deleniti cupiditate porro eius doloremque modi pariatur quisquam! Dignissimos, quos vitae? Debitis
dolorum
omnis
dolorem, incidunt unde labore dolore laudantium at?</p>
<p>Voluptatem maxime ex nihil eaque voluptatibus? Blanditiis nostrum quas illo temporibus porro, dolor sit,
error
aliquam suscipit libero nam? Illum molestiae inventore placeat pariatur atque nostrum, possimus, vitae
magnam
animi repudiandae odit aliquid! Beatae odio saepe facilis quia natus nemo! Illo expedita iusto
necessitatibus
enim sint? In, labore. Libero, iste tempora quibusdam asperiores tempore assumenda deleniti provident
tenetur
delectus labore ab quasi modi incidunt optio commodi praesentium ex atque. Dicta temporibus incidunt
dolorem
natus inventore est autem doloremque? Sint libero accusamus iure saepe, quaerat similique voluptatem.
Veritatis
quam pariatur voluptates quo ipsam. Voluptatum autem aliquid dolor quaerat quod possimus provident totam
aliquam
rerum velit magni tempore iste ab adipisci blanditiis cupiditate corporis fuga, culpa cumque aspernatur.
Nemo
omnis voluptates sit. Magnam voluptas repellendus maiores ut, eius laborum. Molestias quod distinctio
quasi
dolorem libero odio ipsa perspiciatis ratione sunt. Nulla ad debitis iure culpa eos eligendi error
quidem
iusto
impedit odit quia quisquam, odio delectus, assumenda nemo maiores nisi. Ipsa, expedita libero possimus
dolores
laboriosam sed debitis facere repudiandae fugiat natus cumque autem illum quod amet architecto ipsam?
Iusto
quaerat, delectus sunt velit architecto modi at in necessitatibus cumque provident fuga dicta voluptate
nam
est
minus dolorum fugit odit voluptatum quam. Natus ea ipsam ipsa voluptates, amet laboriosam maxime
obcaecati
in
deserunt reprehenderit iure cupiditate minima sapiente dicta magnam, nisi facilis sequi veniam eos
molestiae.
Fugit mollitia quo porro provident voluptas labore ullam ipsum incidunt quis veniam nihil dignissimos
dolorum,
optio facere deleniti aut aliquid voluptatem aspernatur quia illum nemo! Error numquam, consequatur
illum
nulla
hic id sit quasi ipsa a sapiente quis molestiae nihil odit cumque pariatur, velit labore eligendi
cupiditate
dolore, neque ad aut facilis. Beatae repellat officiis explicabo ab velit culpa debitis veritatis,
consectetur
nihil illo quibusdam tempora asperiores quisquam provident vitae ea voluptatibus dolore, optio natus
ducimus?
</p>
<div class="back-to-top"><a href="#top">Back to top</a></div>
</main>
<footer class="page-footer">
<ul role="list">
<li><a href="https://github.com/chrisnajman/scroll-page-watcher" target="_blank"
rel="noopener noreferrer">GitHub Repository</a></li>
</ul>
</footer>
</div>
<span class="scroll-watcher" aria-hidden="true"></span>
</body>
</html>