/* ========================================================== LA TRANSICIÓN ENTRE PÁGINAS — UN SOLO FICHERO ---------------------------------------------------------- La pegatina que se pega y se despega, adaptada del StickerPeel de React Bits. Vivía solo en la portada; ahora la usan también las siete páginas de dentro, así que está aquí y no repetida en ocho sitios. EL COLOR DEL PANEL ES EL DEL SITIO AL QUE VAS. ---------------------------------------------------------- Esto es lo único que se ha añadido al traerla. Si el panel fuera siempre del color de donde SALES, al levantarlo aparecería una página de otro color debajo y se vería el cambio — que es justo lo que la transición existe para tapar. Se resuelve en dos sitios y sin ninguna condición escrita a mano: · al LLEGAR, el panel usa var(--fondo, #fdfdfd). En la portada esa variable existe y vale negro; en las interiores no existe y entra el respaldo blanco. Cada página se lo pinta sola, igual que el menú. · al SALIR, el JavaScript mira a dónde vas y le pone al panel el color de allí antes de bajarlo. ========================================================== */ /* ========================================================== LA TRANSICIÓN ENTRE PÁGINAS ---------------------------------------------------------- Un solo gesto, y todo hacia abajo: al salir → el panel BAJA desde arriba y tapa la pantalla, y la pegatina se pega en el centro. al llegar → la pegatina se despega por la esquina y, con ella levantada, el panel entero CAE hacia abajo dejando ver la página nueva. Que todo vaya en la misma dirección es lo que lo hace legible: antes el panel subía, la pegatina se encogía hacia abajo y luego volvía a subir, y eran tres movimientos discutiendo. ========================================================== */ .transicion{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; transform:translateY(-100%); transition:transform .55s var(--ease-out, cubic-bezier(.16,1,.3,1)); pointer-events:none; } /* EL COLOR VA EN UNA CAPA APARTE, NO EN EL PANEL. ---------------------------------------------------------- Antes el fondo estaba pintado sobre el propio panel. Con el fondo ahí, la única manera de enseñar la página nueva era apartar el panel entero — así que primero se despegaba la pegatina, y DESPUÉS, terminado eso, el panel se iba. Dos tiempos, uno detrás de otro, y entre medias una pantalla lisa esperando. Separando el color, el panel puede seguir sujetando la pegatina mientras el color se retira. Y como el color se retira al ritmo del despegue, lo que se ve es lo que se pidió: la página nueva asomando POR DEBAJO de la pegatina, a la vez que se levanta, en vez de después. El respaldo hace que esto valga en las dos webs: en la portada --fondo existe (la mueve la rampa), en las interiores no y entra el blanco. */ .transicion::before{ content:""; position:absolute; inset:0; background:var(--fondo, #fdfdfd); /* "--abre" va de 0 a 1 y lo escribe el mismo sitio que despega la pegatina, así que las dos cosas no pueden desincronizarse: son el mismo número. */ opacity:calc(1 - var(--abre, 0)); transition:opacity .5s linear; } .transicion.es-tapando{ transform:translateY(0); pointer-events:auto } /* La caída es más lenta que la entrada y arranca despacio: da la sensación de peso, como algo que se suelta. */ .transicion.es-cayendo{ transform:translateY(100%); transition:transform .72s cubic-bezier(.55,0,.35,1); } .transicion.sin-animar{ transition:none } /* Al llegar, el panel ya está puesto y la pegatina ya está pegada, sin animación ninguna: la página nueva empieza en el fotograma exacto en que la anterior lo dejó. Esto es lo que quita el pestañeo. */ html.llega .transicion{ transform:translateY(0); /* LA RED DE SEGURIDAD, Y ESTE ES EL FALLO QUE LA PIDE. ---------------------------------------------------------- Esta regla TAPA la pantalla entera, y hasta ahora lo único que la quitaba era el JavaScript. O sea que cualquier motivo por el que ese JavaScript no llegara a correr —una copia vieja en la caché, un error en otro sitio, un fichero que no baja— no daba una web sin animación: daba una web EN BLANCO. Es justo lo que pasó: el navegador tenía cacheada la versión del HTML en la que el panel estaba escrito DESPUÉS del script, el script no lo encontraba, salía por su primera línea, y el panel se quedaba puesto para siempre. Un adorno no puede ser lo único que sostiene que la página se vea. Con esta animación, el panel se va SOLO a los 1,8 s aunque no corra una línea de JavaScript. Si el JavaScript sí corre —el camino normal— quita la clase "llega" a los 430 ms y la animación ni siquiera empieza: no se nota que existe. 1,8 s es a propósito más de lo que tarda el gesto bueno (1,2 s): así nunca compite con él, solo recoge lo que se caiga. */ animation:panel-seguro 0s linear 1.8s forwards; } @keyframes panel-seguro{ to{ transform:translateY(-100%) } } /* Y el seguro tiene que apagar también el color: el panel se aparta, pero si la capa de color siguiera opaca en su sitio la pantalla quedaría igual de tapada. El fallo que arregla el seguro es "no se ve la web"; dejarse el color detrás sería arreglarlo a medias. */ html.llega .transicion::before{ animation:color-seguro .5s linear 1.5s forwards; } @keyframes color-seguro{ to{ opacity:0 } } html.llega .transicion .pegatina{ opacity:1; transform:none; animation:none } /* ---------- La pegatina ---------- Adaptado del componente StickerPeel de React Bits. Vive solo en la transición entre páginas: repetirla también en el scroll la gastaba. Dos gestos, y solo dos: se pega y se despega. */ .pegatina{ --p:12px; --peel:0%; --giro:-6deg; --ancho:clamp(200px, 34vmin, 330px); --ini:calc(-1 * var(--p)); --fin:calc(100% + var(--p)); position:relative; width:var(--ancho); opacity:0; transform-origin:center; will-change:transform, opacity; -webkit-user-select:none; user-select:none; } /* Se pega: cae, aplasta un poco al tocar y se asienta. El golpe corto es lo que hace que se lea como "pegar" y no como "aparecer". La opacidad sube en el primer tercio, no durante toda la animación: si tarda, se ve como un pestañeo. */ .pegatina.es-puesta{ animation:pega .58s var(--ease-out, cubic-bezier(.16,1,.3,1)) forwards } @keyframes pega{ 0% { opacity:0; transform:translateY(-14px) scale(.72) rotate(-7deg) } 30% { opacity:1 } 58% { transform:translateY(0) scale(1.06) rotate(1.5deg) } 78% { transform:scale(.985) rotate(-.6deg) } 100% { opacity:1; transform:scale(1) rotate(0deg) } } .pegatina__cara{ clip-path:polygon(var(--ini) var(--peel), var(--fin) var(--peel), var(--fin) var(--fin), var(--ini) var(--fin)); filter:url(#sombraPegatina); will-change:clip-path; } .pegatina__luz{ filter:url(#luzPegatina) } .pegatina__img{ width:var(--ancho); height:auto; transform:rotate(var(--giro)); -webkit-user-drag:none } /* El reverso: la misma imagen del revés y teñida de gris, que asoma conforme se levanta la esquina. */ .pegatina__solapa{ position:absolute; left:0; top:calc(-100% + 2 * var(--peel) - 1px); width:100%; height:100%; clip-path:polygon(var(--ini) var(--ini), var(--fin) var(--ini), var(--fin) var(--peel), var(--ini) var(--peel)); transform:scaleY(-1); will-change:clip-path, top; } /* LA CARA DE ATRÁS: UNA SILUETA, NO UN RECTÁNGULO. ---------------------------------------------------------- La esquina que se levanta tiene que enseñar el REVERSO de la pegatina: la misma forma, en el color del papel, sin dibujo. Se hacía con dos filtros de SVG —uno rellenaba la silueta de color y otro le daba un brillo— y no funcionaba: lo que se veía era un rectángulo beige que sobresalía por los dos lados de la mariposa, como si la pegatina estuviera pegada sobre un cartoncito. Reproducido en el navegador, en móvil y en ordenador; en la grabación del móvil se ve igual. El motivo es que un "feFlood" pinta TODA la región del filtro y el recorte contra la silueta no llegaba a aplicarse. Se podría perseguir el porqué exacto dentro del filtro, pero no hace falta: lo que se quiere —"rellena esta forma de este color"— es exactamente lo que hace una máscara, y una máscara es una línea de CSS que entienden todos los navegadores igual. Así que la imagen del reverso deja de pintarse (sigue ahí para que la caja mida lo que tiene que medir) y el color lo pone su contenedor, recortado por la propia pegatina. Sin filtros: ni rectángulo, ni el gasto de calcular una luz difusa píxel a píxel en cada fotograma. */ /* LA SOLAPA SE VA. Y ESTE ES EL RAZONAMIENTO. ---------------------------------------------------------- La esquina levantada enseñaba el reverso: la misma silueta, del color del papel. Sobre el papel está bien pensado y la geometría era correcta —comprobado midiendo la propia imagen: en su tercio superior la mariposa ocupa entre el 87 % y el 99 % del ancho, en dos trozos, que son las dos alas—. El problema es de tamaño, no de código. A 200 px, esas dos alas volteadas y teñidas de un solo color se funden en una mancha clara con el canto recto de la doblez: no se lee como el reverso de una pegatina, se lee como un rectángulo detrás. Y un adorno que hay que explicar no está funcionando. Se quita el reverso y se queda el gesto: la pegatina se despega desde arriba y por debajo aparece la página nueva. Lo que sostiene la lectura es la sombra de la doblez, que sigue ahí. Menos pieza, misma idea, y nada que dé la nota. */ .pegatina__solapa{ display:none } .pegatina__cara, .pegatina__solapa{ transition:clip-path .5s var(--ease-out, cubic-bezier(.16,1,.3,1)), top .5s var(--ease-out, cubic-bezier(.16,1,.3,1)); } /* Quien pide menos movimiento no ve la pegatina: los enlaces navegan directamente. El JavaScript ya lo comprueba; esto es por si alguna clase se quedara puesta. */ @media (prefers-reduced-motion: reduce){ .transicion{ display:none } } /* ========================================================== EN EL MÓVIL, SIN FILTROS DE SVG ---------------------------------------------------------- La pegatina lleva cuatro filtros de SVG: una sombra, dos luces —"feDiffuseLighting" con un foco puntual, que es lo que le da el brillo de vinilo— y un teñido para el reverso. Se aplican a un elemento que ocupa media pantalla y que además se está animando: la esquina se levanta con "clip-path" mientras la pegatina cae y rebota. En un ordenador eso lo lleva la tarjeta gráfica. En un móvil, una luz difusa se calcula píxel a píxel en el procesador, y hay que recalcularla en CADA fotograma porque debajo está cambiando el recorte. Es la razón de que el paso de una página a otra se viera a tirones: no era la carga de la página siguiente, era dibujar la pegatina. Aquí se cambian las tres luces por lo que de verdad se aprecia a ese tamaño —una sombra, y hecha con "drop-shadow", que sí va por la tarjeta gráfica— y el reverso por un gris plano. La animación es la misma: cae igual, se levanta la esquina igual. Lo que se quita es el brillo, que en una pantalla de seis pulgadas y durante medio segundo no lo ha visto nadie. Se usa "pointer: coarse" y no un ancho: lo que decide no es el tamaño de la pantalla sino la potencia del aparato, y un dedo es la mejor señal que tenemos de que hay una batería detrás. */ @media (pointer: coarse){ /* LA SOMBRA VA EN LA IMAGEN, NO EN LA CAPA RECORTADA. ---------------------------------------------------------- Aqui estaba la "pantalla detras del sticker". La sombra estaba puesta sobre el mismo elemento que lleva el recorte del despegue, y el navegador aplica la sombra DESPUES de recortar: lo que proyecta sombra ya no es la silueta de la mariposa, es el rectangulo que deja el corte. De ahi ese panel gris que aparecia justo a la altura del despegue y crecia con el. No era el PNG —es transparente, comprobado— ni el panel de la transicion. Era la sombra dibujando el recorte. Puesta sobre la imagen, que no lleva recorte, la sombra sigue el contorno de la mariposa. El corte del despegue se aplica luego, encima de las dos, y se lleva por delante tambien la sombra: que es justo lo que hace una pegatina al levantarse. */ /* NI UN FILTRO EN TODO EL DESPEGUE. Primero estaba la sombra sobre la capa recortada; la movi a la imagen porque Safari aplica el filtro DESPUES del recorte y lo que proyecta sombra acaba siendo el rectangulo del corte, no la mariposa. Siguio saliendo. En vez de seguir moviendola de sitio se quita: mientras no haya ningun filtro en esta rama, no hay nada que pueda dibujar un borde recto. La pegatina se despega igual; lo unico que pierde es un relieve que en una pantalla de movil, a 145 px, casi no se veia. */ /* SIN LOS FILTROS DE SVG, QUE EN EL MOVIL NI SE VEN NI SE PORTAN BIEN. Pero uno por uno, no con un "todos": la solapa necesita el suyo. */ .pegatina__cara{ filter:none } .pegatina__luz{ filter:none } /* EL DESPEGUE DE VERDAD: EL PAPEL SE DOBLA. ---------------------------------------------------------- Van cuatro intentos. El recorte solo la corta —linea recta—. La mascara la desvanece —un fundido con otro nombre—. El giro entero la tumba —se cae, no se despega—. Ninguno funcionaba porque a todos les faltaba lo mismo: el REVERSO del papel. Un despegue son dos trozos de la misma pegatina: la parte que sigue pegada, y la que ya se ha levantado y esta vuelta del reves sobre la primera. La bisagra entre las dos es lo que el ojo lee como "se esta despegando". Sin reverso, cualquier corte parece un corte y cualquier giro parece una caida. El reverso ya estaba escrito y con la geometria correcta —es la misma que usa el componente de React Bits—; estaba apagado porque se veia como una losa. Y se veia asi porque le faltaba lo unico que le da sentido: que sea GRIS y no una copia a todo color de la mariposa boca abajo. El gris se hace sin SVG: "brightness(0)" pone a negro todo lo que se ve y respeta el alfa, e "invert(.72)" convierte ese negro en el gris del papel. Sigue la silueta, no la caja: por eso no puede dibujar el rectangulo de la otra vez. */ .pegatina__cara{ clip-path:polygon(var(--ini) var(--peel), var(--fin) var(--peel), var(--fin) var(--fin), var(--ini) var(--fin)); -webkit-mask-image:none; mask-image:none; transform:none; } .pegatina{ perspective:none; /* Mas pequeña que en el ordenador. A 200 px ocupa media anchura de un movil y el despegue no se lee, se ve un bulto moviendose; a 145 se ve la esquina levantarse. Esta linea se perdio en una reescritura del bloque y la pegatina volvio a salir a tamaño de ordenador. */ --ancho:clamp(126px, 36vmin, 178px); } .pegatina__solapa{ display:block } .pegatina__solapa .pegatina__img{ filter:brightness(0) invert(.72); } .transicion.es-cayendo{ transform:translateY(100%); opacity:1; transition:transform .72s cubic-bezier(.55,0,.35,1); } }