UserAinBow ()

In diesem Artikel wird die Erstellung eines Regenbogen -Hintergrundeffekts für eine persönliche Website Potato.horse beschrieben. Der Autor, der eine Pause von der Arbeit machte, um persönliche Projekte zu verfolgen, erklärt den einfachen, aber effektiven Javascript -Code hinter dem Effekt.

Das Kernkonzept beinhaltet die Zuordnung der Bildlaufposition des Benutzers auf den Farbwert des HSL (Farbton, Sättigung, Leichtigkeit). Dadurch wird ein reibungsloser Farbübergang erstellt, während der Benutzer den Seiteninhalt durchläuft. Der Code -Snippet wird bereitgestellt:

 exportieren const userainbowbg = () =>
useEffect (() => {
  const cb = () => {
    const viewEgheight = window.innerHeight
    const contaltheight = document.body.getBoundingClientRect (). Höhe
    const viewportssperrotation = math.min (
      3,,
      CONTHALTHEIT / ViewAteight
    )
    const von = 51
    const progress =
      window.scrolly / (ViewPheightheight * ViewPortSerRrotation)
    const H = (aus 360 * Fortschritt) % 360

    document.body.style.backgroundcolor = `HSL ($ {H} Deg, 100%, 50%)` `
  }
  window.addeventListener ('scrollen', cb, {passiv: true})
  return () => window.removeEventListener ('Scroll', CB)
})

Der Autor kontrastiert das HSL -Modell mit RGB und hebt die intuitive Natur von HSL zur Einstellung von Farbtemperatur und Helligkeit hervor. Sie erklären die Auswahl von HSL für die Aufrechterhaltung einer konsistenten Helligkeit bei gleichzeitiger Änderung des Farbtons, ein wesentlicher Aspekt des gewünschten Effekts. Der anfängliche Farbton -Offset ( const from = 51 ) wird als stilistische Wahl erklärt.

Mögliche Leistungsverbesserungen werden diskutiert, einschließlich der Vermeidung von redundanten getBoundingClientRect -Anrufen und der Verwendung requestAnimationFrame für das Droseln. Der Autor betont jedoch die Bedeutung der Messung der Leistung vor der Optimierung.

Der Artikel befasst sich auch mit den Einschränkungen der nicht-konzeptuell einheitlichen Natur von HSL und erkennt an, dass einige vollständig gesättigte Farben dunkler erscheinen können als andere. Der Autor plant, dies in zukünftigen Iterationen anhand eines wahrnehmungs einheitlichen Farbraums wie HSLUV zu beheben.

Überlegungen zur Zugänglichkeit werden erwähnt, die sich auf Farbblindheit und die Medienabfrage prefers-reduced-motion konzentrieren. Während anfängliche Tests keine Probleme zeigten, erkennt der Autor die Möglichkeit an, dass die Hintergrundanimation als Bewegung und Pläne weiterer Benutzerforschung angesehen werden kann.

Der Autor schließt mit dem Nachdenken über die nostalgische Inspiration für das Design und zielt auf eine spielerische, aber funktionale Benutzererfahrung ab. Sie erwähnen auch den Spaß, den sie beim Codieren des Projekts nach einer Zeit des Burnouts erlebt haben.

Fußnoten

1. Das 'K' in CMYK steht für Black, um Verwirrung mit 'B' in anderen Farbmodellen zu vermeiden.
2. Die Helligkeit ist aufgrund der Unterschiede zwischen Wahrnehmungsfarbraum und RGB/HSL -Darstellungen nicht perfekt konsistent.

Das obige ist der detaillierte Inhalt vonUserAinBow (). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!