nino/manga-reader
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Animación de hoja de papel al pasar página y URLs versionadas para saltar la caché del proxy

Browse Source 
- Lector por páginas: animaciones Pasar hoja (la hoja se curva al levantarla, con sombra), deslizar y
  fundido; hacia atrás la página anterior vuelve y se coloca encima.
- app.js, style.css y sw.js se sirven con ?v=<hash> para que ni el proxy ni el navegador den una copia vieja.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
nino
2026-11-01 12:41:22 -06:00
co-authored by Claude Opus 5.5
parent 86999b5725
commit 29af893917
5 changed files with 237 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/style.css
+16
View File
@@ -352,3 +352,19 @@ body.noscroll { overflow: hidden; }
background: #3a2a12; color: #ffd9a0; border-bottom: 1px solid #5a4220; font-size: .9rem; }
#netbanner svg { flex: none; width: 18px; height: 18px; }
body.reading #netbanner { display: none; }
/* Animación al pasar página (modos por página) */
.paged { position: relative; perspective: 2200px; }
.paged .stage.leaving { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #000; }
.paged.fit-width .stage.leaving { bottom: auto; }
.paged .curl { position: absolute; z-index: 3; transform-style: preserve-3d; pointer-events: none; }
.paged .curl .strip { position: absolute; top: 0; transform-style: preserve-3d; will-change: transform; }
.paged .curl .sf { position: absolute; top: 0; bottom: 0; left: -0.5px; right: -0.5px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.paged .curl .sf img { position: absolute; top: 0; max-width: none; max-height: none; object-fit: fill; display: block; }
.paged .curl .back { transform: rotateY(180deg); }
.paged .curl .back.paper { background: #e9e5dc; }
.paged .curl .sf i { position: absolute; inset: 0; background: #000; opacity: 0; }
.paged .curldrop { position: absolute; z-index: 2; pointer-events: none; opacity: 0; }
.paged .curldrop.l { background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.2) 35%, rgba(0,0,0,0) 75%); }
.paged .curldrop.r { background: linear-gradient(270deg, rgba(0,0,0,.55), rgba(0,0,0,.2) 35%, rgba(0,0,0,0) 75%); }
.paged .leafkeep { position: absolute; z-index: 2; pointer-events: none; max-width: none; max-height: none; object-fit: fill; }