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:07] – jesus | otros:agradecimientos [2026/05/06 17:28] (actual) – jesus | ||
|---|---|---|---|
| Línea 2: | Línea 2: | ||
| < | < | ||
| < | < | ||
| - | #pcw_theater_master | + | #pcw_theater_system |
| background-color: | background-color: | ||
| height: 600px; width: 100%; overflow: hidden; position: relative; | height: 600px; width: 100%; overflow: hidden; position: relative; | ||
| - | border: 4px solid #1a1a1a; color: #00ff00 !important; margin: 20px 0; | + | border: 4px solid #1a1a1a; margin: 20px 0; |
| - | cursor: pointer; | + | |
| } | } | ||
| - | /* --- 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.9) 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: | ||
| - | /* --- LIENZO | + | /* --- MOTOR DE SCROLL --- */ |
| #pcw_canvas { | #pcw_canvas { | ||
| position: absolute; width: 100%; text-align: center; | position: absolute; width: 100%; text-align: center; | ||
| top: 600px; display: none; z-index: 100; | top: 600px; display: none; z-index: 100; | ||
| } | } | ||
| - | .pcw_entry { margin-bottom: | + | .pcw_entry { margin-bottom: |
| .pcw_stars { color: #ff8c00; font-size: 1.8em; font-weight: | .pcw_stars { color: #ff8c00; font-size: 1.8em; font-weight: | ||
| .pcw_name { color: #fff !important; font-size: 2.2em; font-weight: | .pcw_name { color: #fff !important; font-size: 2.2em; font-weight: | ||
| - | .pcw_desc { color: #0f0; font-size: 1.2em; display: block; margin: 15px auto; font-style: italic; max-width: 80%; } | + | .pcw_desc { color: #0f0; font-size: 1.2em; display: block; margin: 15px auto; font-style: italic; max-width: 80%; line-height: 1.5; } |
| - | # | + | |
| </ | </ | ||
| - | <div id="pcw_theater_master" | + | <div id="pcw_theater_system"> |
| - | <div id=" | + | <!-- LÍDER ACADEMY --> |
| - | | + | |
| <div id=" | <div id=" | ||
| - | < | + | < |
| - | <div class=" | + | <div class=" |
| - | <div class=" | + | < |
| - | <div id=" | + | <div class=" |
| + | <div class=" | ||
| + | <div class=" | ||
| + | | ||
| + | <div id=" | ||
| </ | </ | ||
| - | <div style=" | + | < |
| </ | </ | ||
| + | <!-- CONTENIDO SCROLL --> | ||
| <div id=" | <div id=" | ||
| - | <div style=" | + | <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 list = [ | + | let posY = 600, engineOn = false, firstRun = true; |
| - | [" | + | |
| - | ["Sean Brannigan", | + | |
| - | ["Sean Riddle", | + | |
| - | [" | + | |
| - | [" | + | |
| - | ["Tony Jewell", | + | |
| - | [" | + | |
| - | ["Mike Thomas", | + | |
| - | [" | + | |
| - | [" | + | |
| - | ["Jose Antonio Guirao Fernández", | + | |
| - | ]; | + | |
| - | let a = null, g = null, loopId | + | function start() { |
| + | const leader | ||
| + | const canvas | ||
| + | const num = document.getElementById(' | ||
| + | |||
| + | engineOn | ||
| + | posY = 600; | ||
| - | // Poblar lista | + | if (firstRun) { |
| - | const container = document.getElementById('pcw_list'); | + | |
| - | list.forEach(d | + | |
| - | | + | let c = 3; num.innerText |
| - | }); | + | let timer = setInterval(() => { |
| - | + | c--; | |
| - | function pcw_unlock_audio() { | + | if (c > 0) num.innerText = c; |
| - | | + | else { |
| - | | + | |
| - | | + | |
| - | | + | canvas.style.display = 'block'; |
| + | | ||
| + | firstRun = false; | ||
| + | tick(); | ||
| + | } | ||
| + | }, 1000); | ||
| + | } else { | ||
| + | | ||
| + | canvas.style.display = ' | ||
| + | | ||
| + | tick(); | ||
| } | } | ||
| - | active = true; a.resume(); | ||
| } | } | ||
| - | function | + | function |
| - | if (!a || a.state !== ' | + | if (!engineOn) return; |
| - | | + | |
| - | o.type = ' | + | const canvas = document.getElementById(' |
| - | v.gain.setValueAtTime(0.3, a.currentTime); v.gain.linearRampToValueAtTime(0, | + | canvas.style.top = posY + 'px'; |
| - | o.connect(v); | + | |
| - | } | + | |
| - | + | ||
| - | function bMusic() { | + | |
| - | const nt = [{f: | + | |
| - | let i = 0; | + | |
| - | function l() { | + | |
| - | if (!running || !a) return; | + | |
| - | let o = a.createOscillator(), | + | |
| - | o.type=' | + | |
| - | v.gain.setValueAtTime(0.06, | + | |
| - | o.connect(v); | + | |
| - | i = (i + 1) % nt.length; | + | |
| - | loopId = setTimeout(l, | + | |
| - | } | + | |
| - | l(); | + | |
| - | } | + | |
| - | + | ||
| - | function start_cycle() { | + | |
| - | const leader = document.getElementById(' | + | |
| - | running = false; scrollY = 600; | + | |
| - | canvas.style.display = ' | + | |
| | | ||
| - | | + | if (Math.abs(posY) > (canvas.offsetHeight)) { |
| - | let timer = setInterval(() => { | + | |
| - | c--; if (active) pPop(); | + | |
| - | if (c > 0) num.innerText = c; | + | |
| - | else { | + | |
| - | clearInterval(timer); | + | |
| - | leader.style.display = ' | + | |
| - | | + | |
| - | running = true; | + | |
| - | if (active) { g.gain.value = 1; bMusic(); } | + | |
| - | engine(); | + | |
| - | } | + | |
| - | }, 1000); | + | |
| - | } | + | |
| - | + | ||
| - | function engine() { | + | |
| - | if (!running) return; | + | |
| - | scrollY -= 1.2; // VELOCIDAD CALIBRADA (SUAVE) | + | |
| - | document.getElementById(' | + | |
| - | + | ||
| - | // DETECTOR DE META: Si el FIN ha desaparecido por completo | + | |
| - | if (scrollY < -5200) { | + | |
| - | | + | |
| - | | + | |
| - | if (g) g.gain.setTargetAtTime(0, | + | |
| - | setTimeout(start_cycle, | + | |
| } else { | } else { | ||
| - | requestAnimationFrame(engine); | + | requestAnimationFrame(tick); |
| } | } | ||
| } | } | ||
| - | window.onload = start_cycle; | + | window.onload = start; |
| </ | </ | ||
| </ | </ | ||
| - | |||
otros/agradecimientos.1778087247.txt.gz · Última modificación: por jesus
