<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : LA_falling-letters.html |
| Label : Playground |
| Author : Leonard Anders |
| Size : 3.944 bytes |
| Created : 12. February 2024 at 12:20 |
| |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>shuffle</title>
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
body{
font-family: Konsole;
font-size: 10vh;
text-align: center;
align-items: center;
justify-content: center;
height: 100vh;
}
/* the parent class for the whole page */
.parent-class {
/* defines the position of the parent class */
position: relative;
top: 50vh;
Left: 50vw;
}
.class {
/* defines the position of the child class */
position: absolute;
/* defines the duration and the repeats for animation */
animation: change-class 10s linear infinite;
}
/* defines the position of all the child classes */
.div-class-1{ position: absolute; top: 0%; left: -3em;}
.div-class-2{ position: absolute; top: 0%; left: -2.3em;}
.div-class-3{ position: absolute; top: 0%; left: -1.5em;}
.div-class-4{ position: absolute; top: 0%; left: -0.7em;}
.div-class-5{ position: absolute; top: 0%; left: -0.1em;}
.div-class-6{ position: absolute; top: 0%; left: 0.6em;}
.div-class-7{ position: absolute; top: 0%; left: 1.2em;}
/* defines the animation changes for the first letter/ child class */
@keyframes change-class {
0%, 20% { opacity: 0; }
20.05%, 21.2% { opacity: 1; }
21.25%, 100% { opacity: 0; }
}
@keyframes change-class1 {
0%, 20% { opacity: 0; }
20.01%, 90.5% { opacity: 1; }
90.51%, 100% { opacity: 0; }
}
@keyframes change-class2 {
0%, 20% { opacity: 0; }
20.01%, 81.2% { opacity: 1; }
81.21%, 100% { opacity: 0; }
}
@keyframes change-class3 {
0%, 20% { opacity: 0; }
20.01%, 72% { opacity: 1; }
72.01%, 100% { opacity: 0; }
}
@keyframes change-class4 {
0%, 20% { opacity: 0; }
20.01%, 63% { opacity: 1; }
63.01%, 100% { opacity: 0; }
}
@keyframes change-class5 {
0%, 20% { opacity: 0; }
20.01%, 53% { opacity: 1; }
53.01%, 100% { opacity: 0; }
}
@keyframes change-class6 {
0%, 20% { opacity: 0; }
20.01%, 43% { opacity: 1; }
43.01%, 100% { opacity: 0; }
}
@keyframes change-class7 {
0%, 20% { opacity: 0; }
20.01%, 33% { opacity: 1; }
33.01%, 100% { opacity: 0; }
}
/* defines the animation duration and repeats for the letters */
.a10{animation: change-class1 10s linear infinite;}
.b18 {animation: change-class2 10s linear infinite;}
.c26 {animation: change-class3 10s linear infinite;}
.d34 {animation: change-class4 10s linear infinite;}
.e42 {animation: change-class5 10s linear infinite;}
.f50 {animation: change-class6 10s linear infinite;}
.g58 {animation: change-class7 10s linear infinite;}
/* defines the animation delay and shuffle mode for the letters, so it looks random */
.a1 {opacity: 0; animation-delay: 0s;}
.a2 {opacity: 0; animation-delay: 0.12s;}
.a3 {opacity: 0; animation-delay: 0.24s;}
.a4 {opacity: 0; animation-delay: 0.36s;}
.a5 {opacity: 0; animation-delay: 0.48s;}
.a6 {opacity: 0; animation-delay: 0.6s;}
.a7 {opacity: 0; animation-delay: 0.72s;}
.a8 {opacity: 0; animation-delay: 0.84s;}
.a9 {opacity: 0; animation-delay: 0.96s;}
.a10 {opacity: 0; animation-delay: 1.08s;}
.b2 {opacity: 0; animation-delay: 0.12s;}
.b3 {opacity: 0; animation-delay: 0.24s;}
.b4 {opacity: 0; animation-delay: 0.36s;}
.b5 {opacity: 0; animation-delay: 0.48s;}
.b6 {opacity: 0; animation-delay: 0.6s;}
.b7 {opacity: 0; animation-delay: 0.72s;}
.b8 {opacity: 0; animation-delay: 0.84s;}
.b9 {opacity: 0; animation-delay: 0.96s;}
.b10 {opacity: 0; animation-delay: 1.08s;}
.b11 {opacity: 0; animation-delay: 1.2s;}
.b12 {opacity: 0; animation-delay: 1.32s;}
.b13 {opacity: 0; animation-delay: 1.44s;}
.b14 {opacity: 0; animation-delay: 1.56s;}
.b15 {opacity: 0; animation-delay: 1.68s;}
.b16 {opacity: 0; animation-delay: 1.8s;}
.b17 {opacity: 0; animation-delay: 1.92s;}
.b18 {opacity: 0; animation-delay: 2.04s;}
.c3 {opacity: 0; animation-delay: 0.24s;}
.c4 {opacity: 0; animation-delay: 0.36s;}
.c5 {opacity: 0; animation-delay: 0.48s;}
.c6 {opacity: 0; animation-delay: 0.6s;}
.c7 {opacity: 0; animation-delay: 0.72s;}
.c8 {opacity: 0; animation-delay: 0.84s;}
.c9 {opacity: 0; animation-delay: 0.96s;}
.c10 {opacity: 0; animation-delay: 1.08s;}
.c11 {opacity: 0; animation-delay: 1.2s;}
.c12 {opacity: 0; animation-delay: 1.32s;}
.c13 {opacity: 0; animation-delay: 1.44s;}
.c14 {opacity: 0; animation-delay: 1.56s;}
.c15 {opacity: 0; animation-delay: 1.68s;}
.c16 {opacity: 0; animation-delay: 1.8s;}
.c17 {opacity: 0; animation-delay: 1.92s;}
.c18 {opacity: 0; animation-delay: 2.04s;}
.c19 {opacity: 0; animation-delay: 2.16s;}
.c20 {opacity: 0; animation-delay: 2.28s;}
.c21 {opacity: 0; animation-delay: 2.4s;}
.c22 {opacity: 0; animation-delay: 2.52s;}
.c23 {opacity: 0; animation-delay: 2.64s;}
.c24 {opacity: 0; animation-delay: 2.76s;}
.c25 {opacity: 0; animation-delay: 2.88s;}
.c26 {opacity: 0; animation-delay: 3s;}
.d4 {opacity: 0; animation-delay: 0.36s;}
.d5 {opacity: 0; animation-delay: 0.48s;}
.d6 {opacity: 0; animation-delay: 0.6s;}
.d7 {opacity: 0; animation-delay: 0.72s;}
.d8 {opacity: 0; animation-delay: 0.84s;}
.d9 {opacity: 0; animation-delay: 0.96s;}
.d10 {opacity: 0; animation-delay: 1.08s;}
.d11 {opacity: 0; animation-delay: 1.2s;}
.d12 {opacity: 0; animation-delay: 1.32s;}
.d13 {opacity: 0; animation-delay: 1.44s;}
.d14 {opacity: 0; animation-delay: 1.56s;}
.d15 {opacity: 0; animation-delay: 1.68s;}
.d16 {opacity: 0; animation-delay: 1.8s;}
.d17 {opacity: 0; animation-delay: 1.92s;}
.d18 {opacity: 0; animation-delay: 2.04s;}
.d19 {opacity: 0; animation-delay: 2.16s;}
.d20 {opacity: 0; animation-delay: 2.28s;}
.d21 {opacity: 0; animation-delay: 2.4s;}
.d22 {opacity: 0; animation-delay: 2.52s;}
.d23 {opacity: 0; animation-delay: 2.64s;}
.d24 {opacity: 0; animation-delay: 2.76s;}
.d25 {opacity: 0; animation-delay: 2.88s;}
.d26 {opacity: 0; animation-delay: 3s;}
.d27 {opacity: 0; animation-delay: 3.12s;}
.d28 {opacity: 0; animation-delay: 3.24s;}
.d29 {opacity: 0; animation-delay: 3.36s;}
.d30 {opacity: 0; animation-delay: 3.48s;}
.d31 {opacity: 0; animation-delay: 3.6s;}
.d32 {opacity: 0; animation-delay: 3.72s;}
.d33 {opacity: 0; animation-delay: 3.84s;}
.d34 {opacity: 0; animation-delay: 3.96s;}
.e5 {opacity: 0; animation-delay: 0.48s;}
.e6 {opacity: 0; animation-delay: 0.6s;}
.e7 {opacity: 0; animation-delay: 0.72s;}
.e8 {opacity: 0; animation-delay: 0.84s;}
.e9 {opacity: 0; animation-delay: 0.96s;}
.e10 {opacity: 0; animation-delay: 1.08s;}
.e11 {opacity: 0; animation-delay: 1.2s;}
.e12 {opacity: 0; animation-delay: 1.32s;}
.e13 {opacity: 0; animation-delay: 1.44s;}
.e14 {opacity: 0; animation-delay: 1.56s;}
.e15 {opacity: 0; animation-delay: 1.68s;}
.e16 {opacity: 0; animation-delay: 1.8s;}
.e17 {opacity: 0; animation-delay: 1.92s;}
.e18 {opacity: 0; animation-delay: 2.04s;}
.e19 {opacity: 0; animation-delay: 2.16s;}
.e20 {opacity: 0; animation-delay: 2.28s;}
.e21 {opacity: 0; animation-delay: 2.4s;}
.e22 {opacity: 0; animation-delay: 2.52s;}
.e23 {opacity: 0; animation-delay: 2.64s;}
.e24 {opacity: 0; animation-delay: 2.76s;}
.e25 {opacity: 0; animation-delay: 2.88s;}
.e26 {opacity: 0; animation-delay: 3s;}
.e27 {opacity: 0; animation-delay: 3.12s;}
.e28 {opacity: 0; animation-delay: 3.24s;}
.e29 {opacity: 0; animation-delay: 3.36s;}
.e30 {opacity: 0; animation-delay: 3.48s;}
.e31 {opacity: 0; animation-delay: 3.6s;}
.e32 {opacity: 0; animation-delay: 3.72s;}
.e33 {opacity: 0; animation-delay: 3.84s;}
.e34 {opacity: 0; animation-delay: 3.96s;}
.e35 {opacity: 0; animation-delay: 4.08s;}
.e36 {opacity: 0; animation-delay: 4.2s;}
.e37 {opacity: 0; animation-delay: 4.32s;}
.e38 {opacity: 0; animation-delay: 4.44s;}
.e39 {opacity: 0; animation-delay: 4.56s;}
.e40 {opacity: 0; animation-delay: 4.68s;}
.e41 {opacity: 0; animation-delay: 4.8s;}
.e42 {opacity: 0; animation-delay: 4.92s;}
.f6 {opacity: 0; animation-delay: 0.6s;}
.f7 {opacity: 0; animation-delay: 0.72s;}
.f8 {opacity: 0; animation-delay: 0.84s;}
.f9 {opacity: 0; animation-delay: 0.96s;}
.f10 {opacity: 0; animation-delay: 1.08s;}
.f11 {opacity: 0; animation-delay: 1.2s;}
.f12 {opacity: 0; animation-delay: 1.32s;}
.f13 {opacity: 0; animation-delay: 1.44s;}
.f14 {opacity: 0; animation-delay: 1.56s;}
.f15 {opacity: 0; animation-delay: 1.68s;}
.f16 {opacity: 0; animation-delay: 1.8s;}
.f17 {opacity: 0; animation-delay: 1.92s;}
.f18 {opacity: 0; animation-delay: 2.04s;}
.f19 {opacity: 0; animation-delay: 2.16s;}
.f20 {opacity: 0; animation-delay: 2.28s;}
.f21 {opacity: 0; animation-delay: 2.4s;}
.f22 {opacity: 0; animation-delay: 2.52s;}
.f23 {opacity: 0; animation-delay: 2.64s;}
.f24 {opacity: 0; animation-delay: 2.76s;}
.f25 {opacity: 0; animation-delay: 2.88s;}
.f26 {opacity: 0; animation-delay: 3s;}
.f27 {opacity: 0; animation-delay: 3.12s;}
.f28 {opacity: 0; animation-delay: 3.24s;}
.f29 {opacity: 0; animation-delay: 3.36s;}
.f30 {opacity: 0; animation-delay: 3.48s;}
.f31 {opacity: 0; animation-delay: 3.6s;}
.f32 {opacity: 0; animation-delay: 3.72s;}
.f33 {opacity: 0; animation-delay: 3.84s;}
.f34 {opacity: 0; animation-delay: 3.96s;}
.f35 {opacity: 0; animation-delay: 4.08s;}
.f36 {opacity: 0; animation-delay: 4.2s;}
.f37 {opacity: 0; animation-delay: 4.32s;}
.f38 {opacity: 0; animation-delay: 4.44s;}
.f39 {opacity: 0; animation-delay: 4.56s;}
.f40 {opacity: 0; animation-delay: 4.68s;}
.f41 {opacity: 0; animation-delay: 4.8s;}
.f42 {opacity: 0; animation-delay: 4.92s;}
.f43 {opacity: 0; animation-delay: 5.04s;}
.f44 {opacity: 0; animation-delay: 5.16s;}
.f45 {opacity: 0; animation-delay: 5.28s;}
.f46 {opacity: 0; animation-delay: 5.4s;}
.f47 {opacity: 0; animation-delay: 5.52s;}
.f48 {opacity: 0; animation-delay: 5.64s;}
.f49 {opacity: 0; animation-delay: 5.76s;}
.f50 {opacity: 0; animation-delay: 5.88s;}
.g7 {opacity: 0; animation-delay: 0.72s;}
.g8 {opacity: 0; animation-delay: 0.84s;}
.g9 {opacity: 0; animation-delay: 0.96s;}
.g10 {opacity: 0; animation-delay: 1.08s;}
.g11 {opacity: 0; animation-delay: 1.2s;}
.g12 {opacity: 0; animation-delay: 1.32s;}
.g13 {opacity: 0; animation-delay: 1.44s;}
.g14 {opacity: 0; animation-delay: 1.56s;}
.g15 {opacity: 0; animation-delay: 1.68s;}
.g16 {opacity: 0; animation-delay: 1.8s;}
.g17 {opacity: 0; animation-delay: 1.92s;}
.g18 {opacity: 0; animation-delay: 2.04s;}
.g19 {opacity: 0; animation-delay: 2.16s;}
.g20 {opacity: 0; animation-delay: 2.28s;}
.g21 {opacity: 0; animation-delay: 2.4s;}
.g22 {opacity: 0; animation-delay: 2.52s;}
.g23 {opacity: 0; animation-delay: 2.64s;}
.g24 {opacity: 0; animation-delay: 2.76s;}
.g25 {opacity: 0; animation-delay: 2.88s;}
.g26 {opacity: 0; animation-delay: 3s;}
.g27 {opacity: 0; animation-delay: 3.12s;}
.g28 {opacity: 0; animation-delay: 3.24s;}
.g29 {opacity: 0; animation-delay: 3.36s;}
.g30 {opacity: 0; animation-delay: 3.48s;}
.g31 {opacity: 0; animation-delay: 3.6s;}
.g32 {opacity: 0; animation-delay: 3.72s;}
.g33 {opacity: 0; animation-delay: 3.84s;}
.g34 {opacity: 0; animation-delay: 3.96s;}
.g35 {opacity: 0; animation-delay: 4.08s;}
.g36 {opacity: 0; animation-delay: 4.2s;}
.g37 {opacity: 0; animation-delay: 4.32s;}
.g38 {opacity: 0; animation-delay: 4.44s;}
.g39 {opacity: 0; animation-delay: 4.56s;}
.g40 {opacity: 0; animation-delay: 4.68s;}
.g41 {opacity: 0; animation-delay: 4.8s;}
.g42 {opacity: 0; animation-delay: 4.92s;}
.g43 {opacity: 0; animation-delay: 5.04s;}
.g44 {opacity: 0; animation-delay: 5.16s;}
.g45 {opacity: 0; animation-delay: 5.28s;}
.g46 {opacity: 0; animation-delay: 5.4s;}
.g47 {opacity: 0; animation-delay: 5.52s;}
.g48 {opacity: 0; animation-delay: 5.64s;}
.g49 {opacity: 0; animation-delay: 5.76s;}
.g50 {opacity: 0; animation-delay: 5.88s;}
.g51 {opacity: 0; animation-delay: 6s;}
.g52 {opacity: 0; animation-delay: 6.12s;}
.g53 {opacity: 0; animation-delay: 6.24s;}
.g54 {opacity: 0; animation-delay: 6.36s;}
.g55 {opacity: 0; animation-delay: 6.48s;}
.g56 {opacity: 0; animation-delay: 6.6s;}
.g57 {opacity: 0; animation-delay: 6.72s;}
.g58 {opacity: 0; animation-delay: 6.84s;}
</style>
</head>
<body>
<div class="parent-class">
<div class="div-class-1">
<span class="class a1">d</span>
<span class="class a2">e</span>
<span class="class a3">f</span>
<span class="class a4">g</span>
<span class="class a5">h</span>
<span class="class a6">i</span>
<span class="class a7">j</span>
<span class="class a8">k</span>
<span class="class a9">l</span>
<span class="a10">s</span>
</div>
<div class="div-class-2">
<span class="class b2">d</span>
<span class="class b3">e</span>
<span class="class b4">f</span>
<span class="class b5">g</span>
<span class="class b6">h</span>
<span class="class b7">i</span>
<span class="class b8">j</span>
<span class="class b9">k</span>
<span class="class b10">l</span>
<span class="class b11">s</span>
<span class="class b12">n</span>
<span class="class b13">o</span>
<span class="class b14">p</span>
<span class="class b15">q</span>
<span class="class b16">r</span>
<span class="class b17">s</span>
<span class="b18">h</span>
</div>
<div class="div-class-3">
<span class="class c3">d</span>
<span class="class c4">e</span>
<span class="class c5">f</span>
<span class="class c6">g</span>
<span class="class c7">h</span>
<span class="class c8">i</span>
<span class="class c9">j</span>
<span class="class c10">k</span>
<span class="class c11">l</span>
<span class="class c12">s</span>
<span class="class c13">n</span>
<span class="class c14">o</span>
<span class="class c15">p</span>
<span class="class c16">q</span>
<span class="class c17">r</span>
<span class="class c18">s</span>
<span class="class c19">h</span>
<span class="class c20">w</span>
<span class="class c21">x</span>
<span class="class c22">y</span>
<span class="class c23">z</span>
<span class="class c24">a</span>
<span class="class c25">b</span>
<span class="c26">u</span>
</div>
<div class="div-class-4">
<span class="class d4">d</span>
<span class="class d5">e</span>
<span class="class d6">f</span>
<span class="class d7">g</span>
<span class="class d8">h</span>
<span class="class d9">i</span>
<span class="class d10">j</span>
<span class="class d11">k</span>
<span class="class d12">l</span>
<span class="class d13">s</span>
<span class="class d14">n</span>
<span class="class d15">o</span>
<span class="class d16">p</span>
<span class="class d17">q</span>
<span class="class d18">r</span>
<span class="class d19">s</span>
<span class="class d20">h</span>
<span class="class d21">w</span>
<span class="class d22">x</span>
<span class="class d23">y</span>
<span class="class d24">z</span>
<span class="class d25">a</span>
<span class="class d26">b</span>
<span class="class d27">u</span>
<span class="class d28">l</span>
<span class="class d29">g</span>
<span class="class d30">h</span>
<span class="class d31">i</span>
<span class="class d32">j</span>
<span class="class d33">k</span>
<span class="d34">f</span>
</div>
<div class="div-class-5">
<span class="class e5">d</span>
<span class="class e6">e</span>
<span class="class e7">f</span>
<span class="class e8">g</span>
<span class="class e9">h</span>
<span class="class e10">i</span>
<span class="class e11">j</span>
<span class="class e12">k</span>
<span class="class e13">l</span>
<span class="class e14">s</span>
<span class="class e15">n</span>
<span class="class e16">o</span>
<span class="class e17">p</span>
<span class="class e18">q</span>
<span class="class e19">r</span>
<span class="class e20">s</span>
<span class="class e21">h</span>
<span class="class e22">w</span>
<span class="class e23">x</span>
<span class="class e24">y</span>
<span class="class e25">z</span>
<span class="class e26">a</span>
<span class="class e27">b</span>
<span class="class e28">u</span>
<span class="class e29">l</span>
<span class="class e30">g</span>
<span class="class e31">h</span>
<span class="class e32">i</span>
<span class="class e33">j</span>
<span class="class e34">k</span>
<span class="class e35">f</span>
<span class="class e36">o</span>
<span class="class e37">p</span>
<span class="class e38">q</span>
<span class="class e39">r</span>
<span class="class e40">s</span>
<span class="class e41">t</span>
<span class="e42">f</span>
</div>
<div class="div-class-6">
<span class="class f6">d</span>
<span class="class f7">e</span>
<span class="class f8">f</span>
<span class="class f9">g</span>
<span class="class f10">h</span>
<span class="class f11">i</span>
<span class="class f12">j</span>
<span class="class f13">k</span>
<span class="class f14">l</span>
<span class="class f15">s</span>
<span class="class f16">n</span>
<span class="class f17">o</span>
<span class="class f18">p</span>
<span class="class f19">q</span>
<span class="class f20">r</span>
<span class="class f21">s</span>
<span class="class f22">h</span>
<span class="class f23">w</span>
<span class="class f24">x</span>
<span class="class f25">y</span>
<span class="class f26">z</span>
<span class="class f27">a</span>
<span class="class f28">b</span>
<span class="class f29">u</span>
<span class="class f30">f</span>
<span class="class f31">g</span>
<span class="class f32">h</span>
<span class="class f33">i</span>
<span class="class f34">j</span>
<span class="class f35">k</span>
<span class="class f36">f</span>
<span class="class f37">o</span>
<span class="class f38">p</span>
<span class="class f39">q</span>
<span class="class f40">r</span>
<span class="class f41">s</span>
<span class="class f42">t</span>
<span class="class f43">f</span>
<span class="class f44">x</span>
<span class="class f45">y</span>
<span class="class f46">z</span>
<span class="class f47">a</span>
<span class="class f48">b</span>
<span class="class f49">c</span>
<span class="f50">l</span>
</div>
<div class="div-class-7">
<span class="class g7">d</span>
<span class="class g8">e</span>
<span class="class g9">f</span>
<span class="class g10">g</span>
<span class="class g11">h</span>
<span class="class g12">i</span>
<span class="class g13">j</span>
<span class="class g14">k</span>
<span class="class g15">l</span>
<span class="class g16">s</span>
<span class="class g17">n</span>
<span class="class g18">o</span>
<span class="class g19">p</span>
<span class="class g20">q</span>
<span class="class g21">r</span>
<span class="class g22">s</span>
<span class="class g23">h</span>
<span class="class g24">w</span>
<span class="class g25">x</span>
<span class="class g26">y</span>
<span class="class g27">z</span>
<span class="class g28">a</span>
<span class="class g29">b</span>
<span class="class g30">u</span>
<span class="class g31">f</span>
<span class="class g32">g</span>
<span class="class g33">h</span>
<span class="class g34">i</span>
<span class="class g35">j</span>
<span class="class g36">k</span>
<span class="class g37">f</span>
<span class="class g38">o</span>
<span class="class g39">p</span>
<span class="class g40">q</span>
<span class="class g41">r</span>
<span class="class g42">s</span>
<span class="class g43">t</span>
<span class="class g44">f</span>
<span class="class g45">x</span>
<span class="class g46">y</span>
<span class="class g47">z</span>
<span class="class g48">a</span>
<span class="class g49">b</span>
<span class="class g50">c</span>
<span class="class g51">l</span>
<span class="class g52">g</span>
<span class="class g53">h</span>
<span class="class g54">i</span>
<span class="class g55">j</span>
<span class="class g56">k</span>
<span class="class g57">l</span>
<span class="g58">e</span>
</div>
</div>
</body>
</html>
