Usando el arco iris () Trucos CSS

Tomé un descanso del trabajo y comencé algunos pequeños proyectos personales (juguetes).Uno de estos pequeños proyectos es Patatas Patatas El lugar donde guardo todos mis garabatos, cuentos visuales y chistes. ¡mira esto!

Sin embargo, esta publicación no se trata de mi descanso en el trabajo, otros experimentos o el sitio en sí. A la gente parece gustarle una técnica específica que utilicé en mi diseño, en particular el efecto de fondo aplicado mientras el usuario ve el contenido que pasa entre los colores:

 

Me preguntaron cómo se logró este efecto (incluida la lectura del código minimizado, lo cual es muy halagador).

Así que aquí hay un breve resumen seguido del contexto:

export const useRainbowBg = () =>
useEffect(() => {
  const cb = () => {
    const viewportHeight = window.innerHeight
    const contentHeight = document.body.getBoundingClientRect().height
    const viewportsPerRotation = Math.min(
      3,
      contentHeight / viewportHeight
    )
    const from = 51
    const progress =
      window.scrollY / (viewportHeight * viewportsPerRotation)
    const h = (from + 360 * progress) % 360

    document.body.style.backgroundColor = `hsl(${h}deg, 100%, 50%)`
  }
  window.addEventListener('scroll', cb, { passive: true })
  return () => window.removeEventListener('scroll', cb)
})

En resumen, mapeo posición de desplazamiento Ingresar tono en notación de color HSL. Vamos a romperlo.

modelo de color

Hay muchas formas de describir colores en CSS, las dos más comunes son RGB (izquierda) y HSL (derecha):

RGB es una paleta adicional. Esto significa que mezclar 100% rojo, verde y azul produce blanco, mezclar 100% rojo y 100% verde pero 0% azul produce amarillo, etc. Esto es diferente de usar pintura al óleo o Modelo de color CMYKdonde el tono resultante será negro (-ish)¹.

Estamos acostumbrados a este enfoque porque es fácil de describir en código, pero especificar colores según el tono, la saturación y la luminosidad parece más natural, especialmente si tiene experiencia en diseño o... ya sabe, que Man usa lenguaje humano.

Como desarrolladores, estamos acostumbrados a RGB, pero en lenguaje coloquial parece poco natural y confuso de usar. parte delantera Difícil de usar en RGB.

Por otro lado, HSL a menudo puede ser más intuitivo de usar. Por ejemplo, si quiero que el color sea un poco más frío, puedo mover el control deslizante de tono un poco a azul y necesito estar más cerca de lo que quiero. Para RGB, si hacemos que el color se vea más frío al incluir más azul, el tono resultante será un poco más brillante, porque el componente azul contribuye al brillo general. Esto significa que tienes que reducir los valores de rojo y verde para compensar.

Para ver cómo funciona esto en la práctica, intente maximizar el azul en el siguiente ejemplo.

Lo primero que llama la atención es que todos los tonos se han cambiado a azul y el brillo general de la imagen ha aumentado. Esto es indeseable en términos de los efectos que estamos discutiendo.

Ahora intentemos hacer lo mismo con la rueda de color HSL. Arrastre el control deslizante hacia la izquierda para cambiar unos 90 grados:

En este caso, no solo se utiliza HSL Convierte a Susan en un vampiropero también mantiene uno similar² Nivel de brillo. Eso es exactamente lo que estoy buscando.

Entonces, lo que quiero decir con eso es:

¿Cómo funciona esto? En resumen, mapeo posición de desplazamiento Ingresar tono en notación de color HSL. Ráfaga, hace 2 días

... no siempre que encontramos un evento de desplazamiento, trato de hacerlo coincidir con el ángulo del círculo de matiz:

No quería comenzar con rojo porque me daría hambre, y el amarillo básico era mejor para el diseño, así que apliqué un pequeño cambio inicial, así que const from = 51 Establezca el desplazamiento inicial.

Y en cuanto al rendimiento básico, ¡eso es todo!

Ahora hay otras tres áreas que necesitan mejoras.

Usar la ejecución del arco iris

Activamos el redibujado cada vez que nos desplazamos, por lo que me preocupa un poco que los dispositivos móviles más antiguos e incluso algunas computadoras portátiles de alta gama incluidas en la pantalla de 4k no puedan mantener estables los 60 cuadros por segundo. Hasta ahora, sin embargo, estoy satisfecho con los resultados. oyente pasivo de eventos Proporciona poco impulso, especialmente en dispositivos móviles.

Si me doy cuenta de que el rendimiento es un problema, especialmente si hay más contenido, puedo concentrarme en:

• eliminar llamadas innecesarias getBoundingClientRect cada vez que se llama a la tecla de desplazamiento y
• Usar retraso o limitar los cambios de color de fondo requestAnimationFrame.

Espero algún impacto de la primera mejora, pero el beneficio de la segunda debería ser insignificante.

Medido antes de la optimización. La obsesión por el rendimiento solo tiene sentido cuando el problema se hace evidente, ya sea por una caída en la velocidad de fotogramas o por la carga de la batería. Su iPhone Pro tiene más poder de cómputo que muchas computadoras portátiles de gama baja, por lo que también es una buena idea probar en estos dispositivos. Tener un maldito teléfono Android viejo para este propósito es algo bueno si puedes ahorrar algo de dinero.

Espacio de color uniforme para la percepción.

Es posible que haya notado que en las ilustraciones anteriores, algunos colores completamente saturados se ven más oscuros que otros. Esto se debe a que los espacios de color que solemos usar para codificar no reflejan cómo funciona. el ojo humano. Dejaré una explicación detallada de alguien con mas experiencia que yo, pero solo quiero decir (¡una advertencia para una simplificación seria!) que, en general, la misma cantidad de rojo/verde/amarillo será más brillante que el azul. Esto significa que el texto de la página es más difícil de leer en algunos casos.

Actualmente, este no es mi problema solo Cuando pongo esto en línea, el título es secundario. Pero hay una solución al problema y no es demasiado complicada: utilizar un espacio de percepción de color uniforme. Hay muchas bibliotecas fuera de la caja en JavaScript/TypeScript y CSS/Sass/<pick your CSS flavor here>. hsluv Parece un buen punto de partida.

accesibilidad

Tenga en cuenta que me centraré en los elementos visuales en sí, en lugar de discutir el resto del sitio (por ejemplo, etiquetas alt, estructura del documento, etc.). Quiero centrarme en el contraste, el daltonismo y las dependencias. prefers-reduced-motion.. El sitio es un documento vivo, siempre hay mucho margen de mejora. Por ejemplo, el contraste puede ser un problema en algunos lugares no críticos. Me complace aceptar comentarios y aplicarlos: ¡Pégame!.

daltónico

Quiero asegurarme de que este efecto no destruya por completo el sitio para personas daltónicas. Así que me centré en los tipos más comunes: deuteranoma y protanomalía (daltonismo rojo-verde), pero también probé más a fondo. Uso Photoshop y Daltonismo (extensión de Chrome) Haz algunas comprobaciones básicas.

prefers-reduced-motion

Esta prefers-reduced-motion La función multimedia CSS se utiliza para detectar si el usuario requiere que el sistema minimice la cantidad de tráfico innecesario que utiliza.

-MDN

Este sitio no contiene muchas animaciones (excepto angelito con salchichas verá si hizo clic en "compartir"), pero me gustaría conocer estas dependencias prefers-reduced-motion Quiero que el color de fondo permanezca igual.

La respuesta corta es: no lo sé. Mi intuición es que la rotación de colores en realidad no califica como movimiento, pero mi experiencia y comprensión del problema es limitada, por decir lo menos. En este caso, prefiero confiar en la investigación del consumidor en lugar de las conjeturas.

Afortunadamente, el sitio logró 5 minutos de fama en Reddit, lo que resultó ser una gran oportunidad para recopilar comentarios. Hasta ahora, ningún usuario ha planteado el tema de los efectos de fondo. Además, tuve la suerte de conocer a un grupo de expertos en accesibilidad como sandrina pereiraSu sugerencia es que (a) la animación de fondo definitivamente corresponde al movimiento y (b) el efecto puede sentirse natural, ya que es un resultado directo de la interacción del usuario.

resumir

La red Geocities de finales de los 90 era divertida y rara. Es divertido de una manera sin obstrucciones y menos performativa. Quería agregar algo de esa apariencia al sitio. Sin embargo, no quiero que sea tan esotérico que tengas que subir tu calificación funky a 9000 y verlo exclusivamente a través de Netscape 7. Todo esto mientras escuchas lo nuevo de Nirvana. desenchufar álbum.

Todavía quiero una experiencia de usuario decente en dispositivos móviles y computadoras de escritorio y un lugar para algunos huevos de Pascua (que no puedes hacer en las relaciones extrañas y abusivas a las que estamos acostumbrados con las redes sociales).

De niño, antes de mi primer acceso a Internet, había creado media docena de sitios web. Ahora, después de tres años de agotamiento, incluso pensando en cambiar de trabajo, esta es la primera vez que realmente disfruto programando. ¡Olvidé lo divertido que era!

¡Ahora sal, acaricia a tu gato y prepara algo!

---

PD cheque el mundo de cameron.

Código de mapa interactivo PPS Se puede encontrar en GitHub.

nota

1. El componente K en CMYK significa "negro". Usar B puede ser confuso porque significa "azul" en otros modelos de color. ⮑
2. No es ideal, porque la percepción del espacio de color es diferente a la descrita con RGB/HSL. ⮑