Hora de confesarse: leo Ventajas de rendimiento de scroll-timeline()pero cuando veo Un impresionante sitio web de narración con desplazamiento en JavaScript, como estelo que me hace preguntarme si el rendimiento de la narrativa de desplazamiento del hilo principal de la vieja escuela es tan malo. cuando el otro zapato cae El creador de este sitio web reconoce “Se toparon con limitaciones reales” y “el uso de dispositivos móviles era técnicamente posible, pero perdería paralaje y arruinaría la composición” hasta tal punto que “eligieron apagar sus teléfonos para proteger la primera impresión”. En otras palabras: no pudieron hacerlo funcionar en dispositivos móviles y parece que el rendimiento de JavaScript podría ser uno de los culpables.
creador de Otro de mis experimentos de desplazamiento favoritos. — También utiliza JavaScript y funciona mejor en el escritorio — Grita a su parte del remolino de texto. “Se vería mejor si se aplicara a todos Características No todas las palabras, pero es muy difícil lograrlo sin un impacto astronómico en el rendimiento utilizando la misma técnica. “
Desafío aceptado.
Es posible que, sin darse cuenta, haya creado un punto de referencia del mundo real para animar suavemente cientos de divs basándose en el desplazamiento.
Ese es nuestro consejo, ver si podemos usar funciones CSS modernas para crear un efecto similar que haga girar suavemente en espiral cada carácter en una cadena de texto a medida que el usuario se desplaza hacia abajo. Para darle al texto original un poco de competencia entre hermanos CSS, demos el nuevo sibling-index() Función de rotación, aunque es Todavía esperando soporte para Firefox al momento de escribir este artículo. Entonces, como respaldo del CodePen a continuación, también puedes ver la grabación de pantalla.
Confesión n.° 2: esto utiliza algunas secuencias de comandos
El único JavaScript es dividir el texto en <div> para cada personaje, pero la animación es CSS puro. Podría codificar todas las etiquetas, pero eso haría que el HTML fuera molesto de leer y mantener. El siguiente script le permite experimentar fácilmente con el lápiz ajustando el contenido del texto.
const el = document.querySelector(".vortex");
el.innerHTML = el.innerHTML.replaceAll(/\s/g, '⠀');
new SplitText(".title", { type: "chars", charsClass: "char" });este SplitText complemento Las cotizaciones aquí se proporcionan de forma gratuita. Biblioteca GSAP. El complemento está diseñado para usarse independientemente de GSAP, que es lo que sucede aquí. Funciona muy bien y es sencillo e incluso se puede rellenar. aria-label Por tanto, los lectores de pantalla podrán ver nuestro texto sin importar cómo lo marquemos. Un tema complicado es que quiero que cada personaje espacial tenga su propia identidad. <div> puedo localizar. La forma más sencilla que puedo encontrar es reemplazar los espacios con carácter de espacio especialcual SplitText Me invertiré <div>. Si alguien conoce una forma mejor, me encantaría escucharla en los comentarios.
Ahora cada uno de nuestros personajes tiene su propia vida. <div>podemos implementar CSS para manejar la animación en espiral.
.vortex {
position: fixed;
left: 50%;
height: 100vh;
animation-name: vortex;
animation-duration: 20s;
animation-fill-mode: forwards;
animation-timeline: scroll();
.char {
--radius: calc(10vh - (7vh/sibling-count() * sibling-index()));
--rotation: calc((360deg * 3/sibling-count()) * sibling-index());
position: absolute !important;
top: 50%;
left: 50%;
transform: rotate(var(--rotation))
translateY(calc(-2.9 * var(--radius)))
scale(calc(.4 - (.25/(sibling-count()) * sibling-index())));
animation-name: fade-in;
animation-ranger-start: calc(90%/var(sibling-count()) * var(--sibling-index()));
animation-fill-mode: forwards;
animation-timeline: scroll();
}
}Utilice espirales y elementos difuminados. sibling-index() y sibling-count()
usamos sibling-count y sibling-index Funciones que calculan juntas cuando se reducen gradualmente varias propiedades de un personaje sibling-index Para aumentar, utilice la siguiente fórmula:
propertyValue = startValue - ((reductionValue/totalCharacters) * characterIndex)El primer carácter comienza cerca del valor máximo. Cada carácter subsiguiente resta una fracción ligeramente mayor, de modo que a medida que el carácter avanza en espiral, la propiedad se reduce gradualmente hasta el valor objetivo seleccionado. Esta técnica se utiliza para impulsar el escalado, la rotación y la distancia desde el centro.
Si el objetivo es organizar los personajes en un círculo en lugar de en una espiral, usaría Funciones trigonométricas CSS como mostrar aquí. Sin embargo, las espirales parecen ser más fáciles de calcular sin funciones trigonométricas. Aparentemente, la versión original de JavaScript que inspiró mi espiral de texto CSS tampoco usaba funciones trigonométricas. La animación de desplazamiento es relativamente simple, ya que simplemente escala y rota todo el elemento principal para dar la ilusión de que el espectador está siendo absorbido por un vórtice.
La única animación que se aplica a un solo personaje es fade-in Para cada carácter de la cadena, se utiliza otra variante del uso de la relación, que retrasa gradualmente sibling-index() llegar sibling-count(). En este caso sumamos animation-range-start Escalona el retraso antes de que los caracteres desaparezcan a medida que el usuario se desplaza. esto me recuerda a El infame pergamino se desvanece Me hizo darme cuenta de que usamos mucho JavaScript porque nos permite diseñar según el índice de elementos. Por lo tanto, es probable que muchos efectos de JavaScript sean reemplazados por CSS a la vez. sibling-index() Ingrese la línea de base. Si puede pensar en otros ejemplos de efectos de JavaScript que podamos recrear en CSS, hágamelo saber en los comentarios. sibling-index().
