userainbow ()

Artikel ini memperincikan penciptaan kesan latar belakang pelangi untuk laman web peribadi, kentang. Penulis, yang berehat dari kerja untuk meneruskan projek peribadi, menerangkan kod JavaScript yang mudah tetapi berkesan di sebalik kesannya.

Konsep teras melibatkan pemetaan kedudukan tatal pengguna ke nilai warna dalam model warna HSL (Hue, Saturation, Lightness). Ini mewujudkan peralihan warna yang lancar sebagai skrol pengguna melalui kandungan halaman. Coretan kod disediakan:

 Eksport const userainbowbg = () =>
useeffect (() => {
  const cb = () => {
    const ViewPotTheight = window.InnerHeight
    const contentHeight = document.body.getBoundingClientRect (). Ketinggian
    const ViewPortSperRotation = Math.min (
      3,
      ContentHeight / ViewPortTheight
    )
    const dari = 51
    Kemajuan const =
      window.scrolly / (viewPortTheight * viewportsperrotation)
    const h = (dari 360 * kemajuan) % 360

    document.body.style.backgroundcolor = `hsl ($ {h} deg, 100%, 50%)`
  }
  window.addeventListener ('tatal', cb, {pasif: true})
  kembali () => window.RemoveEventListener ('tatal', CB)
})

Penulis membezakan model HSL dengan RGB, menonjolkan sifat intuitif HSL untuk menyesuaikan suhu warna dan kecerahan. Mereka menerangkan pilihan HSL untuk mengekalkan kecerahan yang konsisten semasa menukar warna, aspek utama kesan yang diingini. Offset warna awal ( const from = 51 ) dijelaskan sebagai pilihan gaya.

Penambahbaikan prestasi yang berpotensi dibincangkan, termasuk mengelakkan panggilan getBoundingClientRect yang berlebihan dan menggunakan requestAnimationFrame untuk pendikit. Walau bagaimanapun, penulis menekankan pentingnya mengukur prestasi sebelum pengoptimuman.

Artikel ini juga menangani batasan sifat seragam HSL, mengakui bahawa beberapa warna tepu sepenuhnya mungkin kelihatan lebih gelap daripada yang lain. Penulis merancang untuk menangani ini menggunakan ruang warna seragam yang persepsi seperti HSLUV dalam lelaran masa depan.

Pertimbangan kebolehcapaian disebut, memberi tumpuan kepada kebutaan warna dan pertanyaan media prefers-reduced-motion . Walaupun ujian awal tidak menunjukkan masalah, penulis mengakui kemungkinan bahawa animasi latar belakang mungkin dianggap gerakan dan merancang penyelidikan pengguna selanjutnya.

Penulis menyimpulkan dengan mencerminkan inspirasi nostalgia untuk reka bentuk, yang bertujuan untuk pengalaman pengguna yang suka bermain namun berfungsi. Mereka juga menyebut keseronokan yang mereka alami semasa mengodkan projek itu selepas tempoh kebakaran.

Nota kaki

1. 'K' di Cmyk bermaksud hitam, untuk mengelakkan kekeliruan dengan 'B' yang mewakili biru dalam model warna lain.
2. Kecerahan tidak konsisten kerana perbezaan antara ruang warna persepsi dan perwakilan RGB/HSL.

Atas ialah kandungan terperinci userainbow (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!