/* ========================================================== LAS MARIPOSAS SUELTAS ---------------------------------------------------------- La capa vive sobre el documento, no sobre la pantalla: van ancladas a un punto de la página y se quedan ahí mientras bajas, como cualquier otra cosa dibujada. Si fueran fijas viajarían contigo y dejarían de ser parte del sitio para convertirse en un adorno pegado al cristal. ========================================================== */ .mariposas-em{ position:absolute; top:0; left:0; width:100%; height:0; /* alto cero: no empuja nada */ overflow:visible; pointer-events:none; /* nunca se comen un clic */ z-index:1; /* por encima del fondo, por debajo de todo lo demás */ } .mariposa-em{ position:absolute; display:block; aspect-ratio:var(--ar, 1); pointer-events:none; /* CÓMO SE ENCIENDE. "--cerca" vale 1 cuando la mariposa cruza el centro de la pantalla y 0 cuando está lejos; lo escribe el JavaScript en cada scroll. Todo lo que se ve aquí cuelga de ese número: la opacidad, el tamaño y cuánto se ladea. Es el mismo lenguaje que usan los botones —la cercanía manda— pero medido con lo único que existe en las dos pantallas. En el móvil no hay ratón; scroll hay siempre. */ /* "--fuerza" es cuánto se dejan ver. En la portada van al uno: compiten con un vídeo y una rampa de negro a blanco, y por debajo de eso desaparecen. En las páginas de dentro, donde no hay más que texto sobre blanco, la misma presencia las convierte en el protagonista de una página que va de otra cosa. Ahí bajan a poco más de la mitad. */ opacity:calc((.14 + var(--cerca, .35) * .5) * var(--fuerza, 1)); /* NI UN PÍXEL DE SITIO. ---------------------------------------------------------- Aquí había un "scale" atado a la cercanía: la mariposa crecía de 0,86 a 1,06 al cruzar el centro de la pantalla. Un cambio de tamaño no es un cambio de posición, pero se lee como uno —los bordes se van moviendo mientras bajas— y con seis repartidas por la página lo que se percibe es que suben. Se queda solo el giro. La mariposa está clavada donde está y lo único que hace es ladearse un poco según te acercas: se nota que está viva sin que se mueva de su sitio. */ /* VOLUMEN SIN MOVIMIENTO. ---------------------------------------------------------- Aqui el giro colgaba de "--cerca", o sea del scroll: la mariposa se iba ladeando conforme bajabas. Es movimiento, y movimiento es justo lo que no se quiere. La inclinacion pasa a ser FIJA y en el espacio: una pizca de rotacion en los dos ejes, con perspectiva, mas el giro en el plano que ya tenia. Eso es lo que hace que se lea como una pegatina puesta sobre algo y no como un dibujo estampado. Se escribe una vez al colocarla y no vuelve a tocarse: la mariposa esta clavada donde esta, en la misma postura, del principio al final. Del scroll solo queda el encendido, que no la mueve. */ transform:perspective(460px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--giro, 0deg)); transition:opacity .5s linear; /* Y encima, el vuelo: un vaivén corto y lento, con cada una a su ritmo y su retardo para que no respiren a la vez. Va en un ::before y no en el propio elemento porque el transform de arriba ya está ocupado por el encendido, y dos animaciones no pueden compartir la misma propiedad. */ } /* El dibujo lo pinta el ::before y solo el ::before. La primera versión lo ponía en el elemento y lo heredaba el hijo, con un "background-image:none !important" en el padre para que no se viera dos veces. No habría funcionado: una regla con !important en la hoja gana al estilo escrito en el propio elemento, así que el "none" se habría llevado por delante el dibujo antes de que el hijo pudiera heredarlo — mariposas invisibles, y ni un error por ninguna parte. Con una variable no hay pelea: el JavaScript escribe --dibujo y aquí se usa donde toca. */ /* LAS MARIPOSAS SON BLANCAS, Y ESO ES UN PROBLEMA A MEDIAS. ---------------------------------------------------------- Los once dibujos de la marca son trazo BLANCO sobre transparencia — medido: brillo medio de 152 a 255. Están hechos para el fondo negro de la portada, y ahí se ven perfectos. Sobre las páginas de dentro, que son blancas, no se ven en absoluto. No es que se vieran poco: es blanco sobre blanco. Y en la portada tampoco valdría siempre, porque su fondo va de negro a blanco según bajas — la misma mariposa que se lee arriba desaparece al final. Se invierten cuando el fondo es claro. "--invertir" vale 0 o 1 y lo escribe el JavaScript midiendo el fondo de verdad en cada momento, así que en la portada la inversión ocurre a la vez que la rampa. Con la inversión, el trazo blanco se vuelve negro: el mismo dibujo, legible en los dos sitios, sin tener que duplicar once ficheros. */ .mariposa-em::before{ content:""; position:absolute; inset:0; filter:invert(var(--invertir, 0)); transition:filter .45s linear; background-image:var(--dibujo); background-size:contain; background-repeat:no-repeat; background-position:center; /* Sin vaiven. Era la ultima cosa que se movia sola. */ } /* EL VUELO, SIN DESPLAZARSE. El vaivén subía la mariposa siete píxeles y la corría cuatro. Es poco, pero con la página bajando por debajo lo que se ve es que la mariposa se despega de donde estaba. Ahora el mismo vaivén se hace girando: cambia la inclinación, no el sitio. */ @keyframes mariposa-vuela{ 0% { transform:rotate(0deg) } 30% { transform:rotate(3.4deg) } 60% { transform:rotate(-2.8deg) } 100% { transform:rotate(0deg) } } /* Quien pide menos movimiento las ve quietas y algo más tenues: siguen estando —forman parte del sitio— pero no se mueven. */ @media (prefers-reduced-motion: reduce){ .mariposa-em{ transition:none; opacity:.2 } } /* Al imprimir no pintan nada y gastan tinta. */ @media print{ .mariposas-em{ display:none } } /* Las páginas de dentro llevan "es-interior" en el : son las diez que no son la portada. Un solo sitio decide cuánto se ven, en vez de repetir opacidades por toda la hoja. */ body.es-interior .mariposas-em{ --fuerza:.55 }