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

La página sigue al dedo al deslizar, sonido de papel al pasar página y arreglos de la hoja en doble página

Browse Source 
- Arrastrar con el dedo pasa la página siguiendo el toque (hoja, deslizar o fundido); al soltar termina
  de pasar o vuelve a su sitio según lo recorrido y el impulso.
- Sonido de roce de papel sintetizado en el navegador, al azar entre 6 variantes; volumen o sin sonido
  en las opciones del lector.
- Doble página hacia atrás: se precargan también las 2 páginas anteriores, el lado de las páginas nuevas
  sale del orden de lectura y, si aún no han cargado, se desliza en vez de pasar la hoja.
- Safari: sin líneas entre las tiras de la hoja (sombreado con filtro en la propia cara y más solape).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
nino
2026-11-01 15:46:56 -06:00
co-authored by Claude Opus 5.5
parent e66b5fea95
commit 84a60a6501
3 changed files with 238 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/style.css
+1 -2
View File
@@ -359,11 +359,10 @@ body.reading #netbanner { display: none; }
.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 { position: absolute; top: 0; bottom: 0; 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%); }