otros:agradecimientos
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anteriorRevisión previaPróxima revisión | Revisión previa | ||
| otros:agradecimientos [2026/05/06 17:12] – jesus | otros:agradecimientos [2026/05/06 17:28] (actual) – jesus | ||
|---|---|---|---|
| Línea 8: | Línea 8: | ||
| } | } | ||
| - | /* --- LÍDER | + | /* --- LÍDER |
| #pcw_leader { | #pcw_leader { | ||
| position: absolute; inset: 0; background: #1a1a1a; z-index: 200; | position: absolute; inset: 0; background: #1a1a1a; z-index: 200; | ||
| display: flex; flex-direction: | display: flex; flex-direction: | ||
| } | } | ||
| - | .pcw_disc | + | |
| - | width: | + | .pcw_brand_main { color: #0f0; font-size: 3.2em; font-weight: |
| + | |||
| + | | ||
| + | width: | ||
| position: relative; display: flex; align-items: | position: relative; display: flex; align-items: | ||
| - | background: #000; overflow: hidden; | + | background: #000; overflow: hidden; box-shadow: 0 0 30px rgba(255, |
| } | } | ||
| - | | + | |
| + | /* Anillos concéntricos técnicos */ | ||
| + | | ||
| + | .pcw_ring_inner { position: absolute; width: 240px; height: 240px; border: 2px solid rgba(255, | ||
| + | |||
| + | /* Cruceta de mira telescópica */ | ||
| + | .pcw_axis_v { position: absolute; width: 2px; height: 100%; background: #fff; left: 50%; opacity: 0.4; } | ||
| + | .pcw_axis_h { position: absolute; height: 2px; width: 100%; background: #fff; top: 50%; opacity: 0.4; } | ||
| + | |||
| + | /* Aguja de reloj (Barrido de luz) */ | ||
| + | .pcw_clock_hand | ||
| position: absolute; width: 100%; height: 100%; | position: absolute; width: 100%; height: 100%; | ||
| - | background: conic-gradient(rgba(0,0,0,0.95) 0deg, rgba(0, | + | background: conic-gradient(rgba(255,255,255,0.3) 0deg, transparent |
| - | animation: | + | |
| } | } | ||
| - | @keyframes | + | @keyframes |
| - | #pcw_num { color: #fff; font-size: 160px; font-weight: | + | |
| + | #pcw_num { color: #fff; font-size: 160px; font-weight: | ||
| - | /* --- MOTOR DE SCROLL | + | /* --- MOTOR DE SCROLL --- */ |
| #pcw_canvas { | #pcw_canvas { | ||
| position: absolute; width: 100%; text-align: center; | position: absolute; width: 100%; text-align: center; | ||
| Línea 38: | Línea 52: | ||
| <div id=" | <div id=" | ||
| + | <!-- LÍDER ACADEMY --> | ||
| <div id=" | <div id=" | ||
| - | < | + | < |
| - | <div class=" | + | <div class=" |
| - | <div style=" | + | |
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | | ||
| + | | ||
| + | < | ||
| </ | </ | ||
| + | <!-- CONTENIDO SCROLL --> | ||
| <div id=" | <div id=" | ||
| - | < | + | <div style=" |
| - | <h1 style=" | + | <h1 style=" |
| - | <p style=" | + | <p style=" |
| </ | </ | ||
| - | <div id=" | + | |
| - | < | + | |
| + | <div class=" | ||
| + | < | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | </ | ||
| + | |||
| + | < | ||
| </ | </ | ||
| </ | </ | ||
| < | < | ||
| - | const listData | + | let posY = 600, engineOn = false, firstRun = true; |
| - | [" | + | |
| - | ["Sean Brannigan", | + | |
| - | ["Sean Riddle", | + | |
| - | [" | + | |
| - | [" | + | |
| - | ["Tony Jewell", | + | |
| - | [" | + | |
| - | ["Mike Thomas", | + | |
| - | [" | + | |
| - | ["Jose Antonio Guirao Fernández", | + | |
| - | ]; | + | |
| - | const box = document.getElementById(' | + | function |
| - | listData.forEach(d => { | + | const leader = document.getElementById(' |
| - | box.innerHTML += `<div class=" | + | |
| - | }); | + | |
| - | + | ||
| - | let posY = 600, engineActive = false; | + | |
| - | + | ||
| - | function | + | |
| - | const leader = document.getElementById(' | + | |
| - | canvas = document.getElementById(' | + | |
| - | num = document.getElementById(' | + | |
| | | ||
| - | | + | |
| posY = 600; | posY = 600; | ||
| - | | + | |
| - | leader.style.display = ' | + | if (firstRun) { |
| - | + | | |
| - | | + | leader.style.display = ' |
| - | let timer = setInterval(() => { | + | let c = 3; num.innerText = c; |
| - | c--; | + | let timer = setInterval(() => { |
| - | if (c > 0) num.innerText = c; | + | c--; |
| - | else { | + | if (c > 0) num.innerText = c; |
| - | clearInterval(timer); | + | else { |
| - | leader.style.display = ' | + | clearInterval(timer); |
| - | canvas.style.display = ' | + | leader.style.display = ' |
| - | | + | canvas.style.display = ' |
| - | tick(); | + | |
| - | } | + | |
| - | }, 1000); | + | |
| + | } | ||
| + | }, 1000); | ||
| + | } else { | ||
| + | leader.style.display = ' | ||
| + | canvas.style.display = ' | ||
| + | engineOn = true; | ||
| + | tick(); | ||
| + | } | ||
| } | } | ||
| function tick() { | function tick() { | ||
| - | if (!engineActive) return; | + | if (!engineOn) return; |
| - | posY -= 1.0; // Velocidad de crucero | + | posY -= 0.55; // VELOCIDAD ULTRA LENTA DE LECTURA |
| - | document.getElementById(' | + | |
| + | canvas.style.top = posY + ' | ||
| | | ||
| - | | + | if (Math.abs(posY) > (canvas.offsetHeight)) { |
| - | | + | |
| - | | + | |
| - | | + | |
| - | setTimeout(startEngine, | + | |
| } else { | } else { | ||
| requestAnimationFrame(tick); | requestAnimationFrame(tick); | ||
| Línea 114: | Línea 140: | ||
| } | } | ||
| - | window.onload = startEngine; | + | window.onload = start; |
| </ | </ | ||
| </ | </ | ||
| - | |||
otros/agradecimientos.1778087549.txt.gz · Última modificación: por jesus
