Skip to content

Commit 9e935fa

Browse files
midudevmidudev
committed
Merge branch 'main' of github.com:midudev/javascript-100-proyectos
2 parents 7335ee7 + 4a0ee33 commit 9e935fa

File tree

7 files changed

+1344
-3
lines changed

7 files changed

+1344
-3
lines changed

‎web/public/projects/11-js-perf-benchmark/index.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@
125125
display: flex;
126126
flex-direction: column;
127127
align-items: center;
128+
justify-content: center;
128129

129130
.chart {
130131
width: 200px;
@@ -276,7 +277,7 @@ <h2>Test cases</h2>
276277
<button class="send-button">Benchmark code! 🚀</button>
277278

278279
</div>
279-
<div class="chart-container">
280+
<aside class="chart-container">
280281
<svg class="chart" viewBox="0 0 200 300">
281282
<rect class="bar" x="20" y="-300" width="2" height="300" fill="green"></rect>
282283
<rect class="bar" x="70" y="-300" width="2" height="50" fill="yellow"></rect>
@@ -290,7 +291,7 @@ <h2>Test cases</h2>
290291
<span class="percentage">60%</span>
291292
<span class="percentage">80%</span>
292293
</div>
293-
</div>
294+
</aside>
294295
</main>
295296
</body>
296297

‎web/public/projects/12-moto-scroll/frames/0.webp

27.1 KB
Binary file not shown.

‎web/public/projects/12-moto-scroll/images.js

+1,202
Large diffs are not rendered by default.

‎web/public/projects/12-moto-scroll/index.html

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>🏍️ Moto Scroll</title>
8+
<style>
9+
*,
10+
*::before,
11+
*::after {
12+
box-sizing: border-box;
13+
}
14+
15+
body {
16+
margin: 0;
17+
}
18+
19+
img {
20+
width: 100vw;
21+
height: 100dvh;
22+
object-fit: cover;
23+
position: fixed;
24+
}
25+
26+
main {
27+
height: 300dvh;
28+
}
29+
30+
header {
31+
background: linear-gradient(40deg, #ba3816, #a41705 40%);
32+
width: 300px;
33+
height: 300px;
34+
border-radius: 1000px;
35+
position: absolute;
36+
top: 0;
37+
left: 50%;
38+
transform: translateX(-50%);
39+
z-index: 1;
40+
margin-top: -230px;
41+
display: flex;
42+
align-items: flex-end;
43+
justify-content: center;
44+
animation: slideInDown 1500ms ease-out;
45+
46+
img {
47+
width: 130px;
48+
margin: 0 auto;
49+
height: auto;
50+
margin-bottom: 30px;
51+
}
52+
}
53+
54+
@keyframes slideInDown {
55+
from {
56+
transform: translate3d(-50%, -100%, 0);
57+
opacity: 0;
58+
}
59+
60+
to {
61+
transform: translate3d(-50%, 0, 0);
62+
opacity: 1;
63+
}
64+
}
65+
</style>
66+
67+
<script type="module">
68+
import { images } from './images.js'
69+
70+
const main = document.querySelector('main')
71+
const MAX_FRAMES = 151
72+
let currentFrame = 0
73+
74+
function updateImage(frame = 0) {
75+
const src = images[frame].p
76+
img.src = src
77+
}
78+
79+
// init with the first image
80+
const img = document.createElement('img')
81+
// append img to main
82+
main.appendChild(img)
83+
updateImage(currentFrame)
84+
85+
// Altura máxima del scroll
86+
let maxScroll = document.documentElement.scrollHeight - window.innerHeight;
87+
88+
window.addEventListener('resize', () => {
89+
maxScroll = document.documentElement.scrollHeight - window.innerHeight;
90+
});
91+
92+
let lastFrameUpdate = 0
93+
94+
window.addEventListener('scroll', () => {
95+
if (Date.now() - lastFrameUpdate < 1) return true
96+
// Actualizamos el contador
97+
lastFrameUpdate = Date.now()
98+
// Posición actual del scroll
99+
const scrollPosition = window.scrollY
100+
// Calcular el porcentaje del scroll
101+
const scrollFraction = scrollPosition / maxScroll;
102+
// ¿Qué frame le toca?
103+
const frame = Math.floor(scrollFraction * MAX_FRAMES)
104+
// nos evitemos algo de trabajo cuando
105+
// al hacer scroll, el frame que le toca es el mismo
106+
// que ya tenía
107+
if (currentFrame !== frame) {
108+
// creamos el id del nombre del archivo
109+
updateImage(frame)
110+
currentFrame = frame
111+
}
112+
});
113+
</script>
114+
</head>
115+
116+
<body>
117+
<main>
118+
<header>
119+
<img src="/logo.png" alt="Ichiban - Your Way to Freedom" />
120+
</header>
121+
</main>
122+
</body>
123+
124+
</html>

‎web/public/projects/12-moto-scroll/logo.png

6.99 KB
Loading

‎web/public/projects/12.webp

24.8 KB
Binary file not shown.

‎web/src/consts.js

+15-1
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,20 @@ export const PROJECTS = [
151151
theme: {
152152
isDark: true
153153
},
154-
youtube: null
154+
youtube: 'https://www.youtube.com/watch?v=VuOcLnzhbDw'
155+
},
156+
{
157+
slug: "12-moto-scroll",
158+
title: "Animación por Scroll",
159+
description: "Anima el fondo de una web a través del scroll",
160+
learnings: [
161+
"Scroll",
162+
"Animaciones",
163+
"Performance"
164+
],
165+
theme: {
166+
isDark: true
167+
},
168+
youtube: 'https://www.youtube.com/watch?v=8EA-WNFMYwI'
155169
},
156170
]

0 commit comments

Comments
 (0)