manzolo/leggenda-del-regolo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Cartello d'apertura «Manzolo (Poca) Art Presents»; il primo fotogramma non congela più il gioco

Browse Source 
Il cartello dura 5 secondi prima del titolo e si salta con un clic o un tasto; il test nel browser
lo controlla. Il primo timestamp di requestAnimationFrame può precedere quello del caricamento:
il dt negativo dava alla musica un volume sotto zero, il browser lanciava un errore e il ciclo
dei fotogrammi si fermava (una volta su tre nella prova in orizzontale).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UdeKd62opy9PKgpQXtVctF
This commit is contained in:
manzolo
2026-10-23 13:26:43 +02:00
co-authored by Claude Opus 5.5
parent 33e2598718
commit 5a07b5effc
4 changed files with 49 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+15
View File
@@ -68,6 +68,21 @@ body { display: flex; justify-content: center; overflow-x: hidden; -webkit-tap-h
#skip-intro { position: absolute; right: 10px; bottom: 10px; font: bold 14px var(--font); padding: .3em .9em; border-radius: 6px; border: 0;
color: var(--bg); background: var(--dim); cursor: pointer; }
@keyframes appear { from { opacity: 0; transform: translateY(6px); } }
/* Cartello d'apertura «Manzolo (Poca) Art Presents»: le parole entrano una alla volta, il «(Poca)» cade dall'alto
come un'aggiunta a mano; dopo 4,3 s sfuma (il JavaScript lo toglie a 5 s). */
#splash { z-index: 3; gap: .15em; cursor: pointer; background: radial-gradient(circle at 50% 45%, #2a2030, #0d0910 70%);
animation: splash-out .7s ease-in 4.3s forwards; }
#splash p { margin: 0; max-width: none; font-weight: bold; text-shadow: 3px 3px 0 #000; opacity: 0; }
#splash .splash-name { font-size: clamp(34px, 8vw, 88px); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
animation: splash-in .9s ease-out .2s forwards; }
#splash .splash-art { font-size: clamp(22px, 4.5vw, 50px); color: var(--accent); animation: splash-in .9s ease-out 1s forwards; }
#splash .splash-art span { display: inline-block; font-size: .7em; font-style: italic; color: #7fe08a; opacity: 0;
animation: splash-poca .45s cubic-bezier(.3, 1.6, .6, 1) 1.9s forwards; }
#splash .splash-present { font-size: clamp(14px, 2.4vw, 26px); letter-spacing: .5em; text-transform: uppercase; color: var(--dim);
animation: splash-in .9s ease-out 2.6s forwards; }
@keyframes splash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes splash-poca { from { opacity: 0; transform: translateY(-1.5em) rotate(-8deg) scale(1.8); } to { opacity: 1; transform: rotate(-8deg); } }
@keyframes splash-out { to { opacity: 0; } }
.overlay h1 { margin: 0; font-size: clamp(30px, 7vw, 76px); line-height: 1; letter-spacing: .02em; color: var(--ink); text-shadow: 3px 3px 0 #000; }
.overlay h1 span { color: #7fe08a; }
.overlay h2 { margin: 0; font-size: clamp(24px, 5vw, 52px); color: var(--accent); }