UserainBow ()

Cet article détaille la création d'un effet de fond arc-en-ciel pour un site Web personnel, Potato. L'auteur, qui a pris une pause dans le travail pour poursuivre des projets personnels, explique le code JavaScript simple mais efficace derrière l'effet.

Le concept de base implique la cartographie de la position de défilement de l'utilisateur à la valeur de la teinte dans le modèle de couleur HSL (teinte, saturation, légère). Cela crée une transition de couleurs lisse lorsque l'utilisateur défile via le contenu de la page. L'extrait de code est fourni:

 Exporter const userainbowbg = () =>
useEFFECT (() => {
  const cb = () => {
    const Viewportheight = window.innerheight
    constationheight = document.body.getBoundingClientRect ().
    Const VisionSperrotation = Math.min (
      3,
      ContentHeight / ViewporthWeight
    )
    const de = 51
    const progress =
      Window.Scrolly / (Viewportheight * fenêtre de la fenêtre)
    const h = (à partir de 360 ​​* progrès)% 360

    document.body.style.backgroundcolor = `HSL ($ {h} deg, 100%, 50%)`
  }
  window.addeventListener ('Scroll', CB, {passif: true})
  return () => window.reMoveEventListener ('Scroll', CB)
})

L'auteur contraste le modèle HSL avec RVB, mettant en évidence la nature intuitive de HSL pour ajuster la température et la luminosité de la couleur. Ils expliquent le choix de HSL pour maintenir une luminosité cohérente tout en changeant de teinte, un aspect clé de l'effet souhaité. Le décalage initial de la teinte ( const from = 51 ) est expliqué comme un choix stylistique.

Les améliorations potentielles des performances sont discutées, notamment en évitant les appels redondants getBoundingClientRect et en utilisant requestAnimationFrame pour l'exécution. Cependant, l'auteur souligne l'importance de mesurer les performances avant l'optimisation.

L'article aborde également les limites de la nature non perceptuelle de HSL, reconnaissant que certaines couleurs entièrement saturées peuvent sembler plus sombres que d'autres. L'auteur prévoit de résoudre ce problème en utilisant un espace colorimétrique perceptuellement uniforme comme HSLUV dans les futures itérations.

Les considérations d'accessibilité sont mentionnées, en se concentrant sur la cécité des couleurs et la requête médiatique prefers-reduced-motion . Bien que les tests initiaux n'aient montré aucun problème, l'auteur reconnaît la possibilité que l'animation d'arrière-plan puisse être considérée comme un mouvement et prévoit de poursuivre la recherche sur les utilisateurs.

L'auteur conclut en réfléchissant à l'inspiration nostalgique de la conception, visant une expérience utilisateur ludique mais fonctionnelle. Ils mentionnent également le plaisir qu'ils ont vécu lors du codage du projet après une période d'épuisement professionnel.

Notes de bas de page

1. Le «K» dans CMYK signifie noir, pour éviter la confusion avec «B» représentant le bleu dans d'autres modèles de couleurs.
2. La luminosité n'est pas parfaitement cohérente en raison des différences entre l'espace colorimétrique perceptuel et les représentations RVB / HSL.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!