Skip to content

Commit 5e31b62

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 54-55
1 parent e4b2afc commit 5e31b62

2 files changed

Lines changed: 321 additions & 0 deletions

File tree

‎public/54/index.html‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" href="/assets/icon.png" />
7+
<title>Day 54/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="toggle" id="toggle">
12+
<div class="rect-1"></div>
13+
<div class="rect-2"></div>
14+
<div class="rect-3"></div>
15+
<div class="rect-4"></div>
16+
<div class="rect-5"></div>
17+
<div class="rect-6"></div>
18+
<div class="rect-7"></div>
19+
</div>
20+
</main>
21+
22+
<style>
23+
body {
24+
margin: 0;
25+
overflow: hidden;
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
-webkit-tap-highlight-color: transparent;
30+
width: 100vw;
31+
height: 100vh;
32+
background-color: #fff;
33+
transition: background-color 0.5s ease-in-out;
34+
}
35+
36+
.toggle {
37+
position: relative;
38+
cursor: pointer;
39+
width: 100px;
40+
aspect-ratio: 29/35;
41+
}
42+
43+
.rect-1,
44+
.rect-2,
45+
.rect-3,
46+
.rect-4,
47+
.rect-5,
48+
.rect-6,
49+
.rect-7 {
50+
position: absolute;
51+
background-color: #000;
52+
transition: all 0.5s ease-in-out;
53+
}
54+
55+
.rect-3,
56+
.rect-4 {
57+
width: calc(11 / 29 * 100%);
58+
aspect-ratio: 11/5;
59+
}
60+
61+
.rect-1,
62+
.rect-2,
63+
.rect-5,
64+
.rect-6,
65+
.rect-7 {
66+
height: calc(11 / 35 * 100%);
67+
aspect-ratio: 5/11;
68+
}
69+
70+
.rect-1 {
71+
top: calc(0 / 35 * 100%);
72+
left: 0%;
73+
}
74+
75+
.rect-2 {
76+
top: calc(12 / 35 * 100%);
77+
left: 0%;
78+
}
79+
80+
.rect-3 {
81+
top: calc(18 / 35 * 100%);
82+
left: calc(6 / 29 * 100%);
83+
}
84+
85+
.rect-4 {
86+
top: calc(30 / 35 * 100%);
87+
left: calc(6 / 29 * 100%);
88+
}
89+
90+
.rect-5 {
91+
top: calc(0 / 35 * 100%);
92+
left: calc(18 / 29 * 100%);
93+
}
94+
95+
.rect-6 {
96+
top: calc(12 / 35 * 100%);
97+
left: calc(18 / 29 * 100%);
98+
}
99+
100+
.rect-7 {
101+
top: calc(24 / 35 * 100%);
102+
left: calc(18 / 29 * 100%);
103+
}
104+
105+
.toggle-n .rect-2 {
106+
top: calc(0 / 35 * 100%);
107+
}
108+
109+
.toggle-n .rect-3 {
110+
top: calc(0 / 35 * 100%);
111+
left: calc(6 / 29 * 100%);
112+
}
113+
114+
.toggle-n .rect-4 {
115+
top: calc(0 / 35 * 100%);
116+
left: calc(18 / 29 * 100%);
117+
}
118+
119+
.toggle-n .rect-5 {
120+
top: calc(6 / 35 * 100%);
121+
left: calc(12 / 29 * 100%);
122+
}
123+
124+
.toggle-n .rect-6 {
125+
top: calc(18 / 35 * 100%);
126+
left: calc(12 / 29 * 100%);
127+
}
128+
129+
.toggle-n .rect-7 {
130+
top: calc(18 / 35 * 100%);
131+
left: calc(12 / 29 * 100%);
132+
}
133+
</style>
134+
135+
<script>
136+
let toggle = document.getElementById("toggle");
137+
138+
toggle.onclick = () => {
139+
toggle.classList.toggle("toggle-n");
140+
};
141+
</script>
142+
</body>
143+
</html>

‎public/55/index.html‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" href="/assets/icon.png" />
7+
<title>Day 55/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="features" id="features">
12+
<div class="feature-text-1" id="feature-text-1">Feature 1</div>
13+
<div class="feature-text-2" id="feature-text-2">Feature 2</div>
14+
<div class="feature-image" id="feature-image">
15+
<div class="feature-image-1">Image 1</div>
16+
<div class="feature-image-2">Image 2</div>
17+
<div class="feature-image-3">Image 3</div>
18+
<div class="feature-image-4">Image 4</div>
19+
</div>
20+
</div>
21+
</main>
22+
23+
<style>
24+
@font-face {
25+
font-family: "SpaceMono";
26+
src: url("/assets/SpaceMono-Bold.woff2") format("woff2");
27+
font-weight: 700;
28+
}
29+
30+
:root {
31+
--scroll-progress: 1;
32+
}
33+
34+
body {
35+
margin: 0;
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
-webkit-tap-highlight-color: transparent;
40+
}
41+
42+
main {
43+
height: 400vh;
44+
}
45+
46+
.features {
47+
position: fixed;
48+
top: 0;
49+
left: 0;
50+
width: 100vw;
51+
height: 100vh;
52+
display: flex;
53+
}
54+
55+
.feature-text-1,
56+
.feature-text-2 {
57+
position: absolute;
58+
font-family: "SpaceMono", sans-serif;
59+
font-weight: 700;
60+
font-size: 30px;
61+
top: 50%;
62+
}
63+
64+
.feature-text-1 {
65+
left: calc((100vw - 100vh) / 2);
66+
transform: translate(-50%, -50%);
67+
}
68+
69+
.feature-text-2 {
70+
right: calc((100vw - 100vh) / 2);
71+
transform: translate(50%, -50%);
72+
}
73+
74+
.feature-image {
75+
position: absolute;
76+
top: 0%;
77+
width: calc(100vh - 40px);
78+
height: calc(100vh - 40px);
79+
margin: 20px;
80+
border-radius: 10px;
81+
background-color: #fff;
82+
outline: 3px solid #000;
83+
outline-offset: -3px;
84+
display: flex;
85+
overflow: hidden;
86+
}
87+
88+
.feature-image-1,
89+
.feature-image-2,
90+
.feature-image-3,
91+
.feature-image-4 {
92+
height: 100%;
93+
aspect-ratio: 1/1;
94+
display: flex;
95+
justify-content: center;
96+
align-items: center;
97+
font-family: "SpaceMono", sans-serif;
98+
font-weight: 700;
99+
font-size: 30px;
100+
color: #000;
101+
background-color: #fff;
102+
}
103+
104+
.feature-image-2 {
105+
color: #fff;
106+
background-color: #000;
107+
}
108+
109+
.feature-image-4 {
110+
color: #fff;
111+
background-color: #000;
112+
}
113+
</style>
114+
115+
<script>
116+
let features = document.getElementById("features");
117+
let featureText1 = document.getElementById("feature-text-1");
118+
let featureText2 = document.getElementById("feature-text-2");
119+
let featureImage = document.getElementById("feature-image");
120+
121+
let docHeight = document.documentElement.clientHeight * 1;
122+
123+
function updateScroll() {
124+
docHeight = document.documentElement.clientHeight * 1;
125+
126+
whichFeature = Math.floor(window.scrollY / docHeight);
127+
scrollProgress = window.scrollY % docHeight;
128+
totalProgress = window.scrollY / (docHeight * 4);
129+
130+
featureImage.scrollLeft = totalProgress * featureImage.scrollWidth;
131+
132+
if (whichFeature === 0) {
133+
featureText1.textContent = "Feature 1";
134+
featureText2.textContent = "Feature 2";
135+
featureImage.style.left = `${
136+
(document.documentElement.clientWidth -
137+
document.documentElement.clientHeight) *
138+
(1 - scrollProgress / docHeight)
139+
}px`;
140+
} else if (whichFeature === 1) {
141+
featureText1.textContent = "Feature 3";
142+
featureText2.textContent = "Feature 2";
143+
featureImage.style.left = `${
144+
(document.documentElement.clientWidth -
145+
document.documentElement.clientHeight) *
146+
(scrollProgress / docHeight)
147+
}px`;
148+
} else if (whichFeature === 2) {
149+
featureText1.textContent = "Feature 3";
150+
featureText2.textContent = "Feature 4";
151+
featureImage.style.left = `${
152+
(document.documentElement.clientWidth -
153+
document.documentElement.clientHeight) *
154+
(1 - scrollProgress / docHeight)
155+
}px`;
156+
} else if (whichFeature === 3) {
157+
featureText1.textContent = "Feature 5";
158+
featureText2.textContent = "Feature 4";
159+
featureImage.style.left = `${
160+
(document.documentElement.clientWidth -
161+
document.documentElement.clientHeight) *
162+
(scrollProgress / docHeight)
163+
}px`;
164+
}
165+
}
166+
167+
window.onscroll = () => {
168+
updateScroll();
169+
};
170+
171+
window.onresize = () => {
172+
updateScroll();
173+
};
174+
175+
updateScroll();
176+
</script>
177+
</body>
178+
</html>

0 commit comments

Comments
 (0)