與僅CSS相比，JavaScript通過(guò)對(duì)滾動(dòng)速度，基於捲軸的觸發(fā)器，獨(dú)立的圖層動(dòng)畫(huà)和更好的移動(dòng)支持來(lái)確切控制來(lái)增強(qiáng)視差滾動(dòng)的滾動(dòng)； 1。使用變換：帶有數(shù)據(jù)速度屬性的translatey（）根據(jù)滾動(dòng)位置以不同的速度移動(dòng)背景層； 2.通過(guò)使用IntersectionObserver僅在元素出現(xiàn)元素時(shí)應(yīng)用視差來(lái)提高性能； 3。對(duì)於更平滑的結(jié)果，請(qǐng)使用gsap與scrolltrigger來(lái)處理動(dòng)畫(huà)擦洗和設(shè)備兼容性；始終通過(guò)利用硬件加速變換，通過(guò)RequestAnimationframe進(jìn)行滾動(dòng)滾動(dòng)事件，限制動(dòng)畫(huà)元素以及在移動(dòng)設(shè)備上進(jìn)行測(cè)試以確保平穩(wěn)性能，因?yàn)槲⒚?，?yōu)化良好的效果提供了最佳的用戶(hù)體驗(yàn)，可以?xún)?yōu)化。

視差滾動(dòng)是一種網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，在該技術(shù)中，當(dāng)用戶(hù)滾動(dòng)時(shí)，背景圖像的移動(dòng)速度比前景內(nèi)容慢，從而產(chǎn)生了深度和沈浸感。儘管僅CSS就可以實(shí)現(xiàn)基本的視差效應(yīng)，但JavaScript可以為您提供更多的控制，尤其是對(duì)於動(dòng)態(tài)或響應(yīng)式行為。這是使用JavaScript創(chuàng)建光滑，性能視差滾動(dòng)效果的方法。

JavaScript如何增強(qiáng)視差滾動(dòng)

CSS background-attachment: fixed可以模擬視差，但它是有限的，可能會(huì)在移動(dòng)設(shè)備上引起性能問(wèn)題。 JavaScript允許您：

• 精確控制滾動(dòng)速度
• 基於滾動(dòng)位置的觸發(fā)效果
• 獨(dú)立動(dòng)畫(huà)多層動(dòng)畫(huà)
• 更好地支持手機(jī)和觸摸設(shè)備

核心想法：當(dāng)用戶(hù)滾動(dòng)時(shí)，根據(jù)當(dāng)前滾動(dòng)偏移更新背景或分層元素的位置。

1。帶有元素定位的基本視差

您可以通過(guò)使用transform: translateY() 。

html：

 <div class =“ Alallax-container”>
  <div class =“ andallax-layer” data-speed =“ 0.2”>背景</div>
  <div class =“ content”>向下滾動(dòng)以查看效果</div>
</div>

CSS：

 .parallax-container {
  身高：200VH； / *高容器以允許滾動(dòng) */
  位置：相對(duì)；
  溢出：隱藏；
}

.parallax-layer {
  位置：絕對(duì)；
  頂部：0;
  左：0;
  寬度：100％；
  身高：100％；
  背景：URL（'bg.jpg'）無(wú)重構(gòu)中心；
  背景大?。悍饷?；
  z index：-1;
}

JavaScript：

 const parallaxlayers = document.queryselectorall（'。andallax-layer'）;

功能updateParallax（）{
  const scrolly = window.scrolly;

  parallaxlayers.foreach（layer => {
    const speed = layer.getAttribute（'data-speed'）|| 0.5;
    const ypos =  - （scrolly * speed）;
    layer.style.transform =`translatey（$ {ypos} px）`;
  }）;
}

//使用節(jié)流進(jìn)行性能
讓ticking = false;
window.addeventlistener（'scroll'，（）=> {
  如果（！ticking）{
    requestAnimationFrame（（）=> {
      UpdateParallax（）;
      ticking = false;
    }）;
    ticking = true;
  }
}）;

？ data-speed屬性控制著每層移動(dòng)的速度。較低的值（例如，0.1）創(chuàng)建一個(gè)微妙的背景滯後；較高的值（例如0.5）使圖層移動(dòng)更快。

2。使用交叉觀察者進(jìn)行懶惰或基於截面的效果

僅當(dāng)元素進(jìn)入視口時(shí)，就不會(huì)使用IntersectionObserver對(duì)每個(gè)捲軸進(jìn)行動(dòng)畫(huà)觸發(fā)。

 cont observer = new IntersectionObserver（（（條目）=> {
  entries.foreach（entry => {
    const target = entry.target;
    const speed = target.getAttribute（'data-speed'）;

    if（entry.isdertering）{
      //僅在視圖時(shí)才啟動(dòng)視差
      window.addeventlistener（'scroll'，（）=> {
        const ypos =  - （window.scrolly * speed）;
        target.style.transform =`translatey（$ {ypos} px）`;
      }）;
    }
  }）;
}，{閾值：0.1}）;

document.queryselectorall（'。andallax-layer'）。 foreach（layer => {
  observer.observe（圖層）;
}）;

這通過(guò)將更新限制為可見(jiàn)元素來(lái)提高性能。

3。與GSAP（可選）平滑視差（可選）

對(duì)於更順暢的動(dòng)畫(huà)和更好的控制，請(qǐng)考慮將GSAP與Scrolltrigger一起使用。

例子：

 gsap.to（“。
  y：（i，el）=> -parseint（el.getAttribute（“ data -speed”）） * 100，
  輕鬆：“無(wú)”，
  scrolltrigger：{
    觸發(fā)器：“ .parallax-container”，
    開(kāi)始：“頂部”，
    結(jié)束：“底部”，
    磨砂：是的
  }
}）;

GSAP可以從開(kāi)箱即用的情況下處理性能，寬鬆和設(shè)備兼容性 - 用於復(fù)雜動(dòng)畫(huà)的理想。

性能提示

如果不優(yōu)化，視差效應(yīng)可能會(huì)損害性能。請(qǐng)記住這些：

• ?使用transform代替top或margin進(jìn)行移動(dòng)（硬件加速）
• ?帶有requestAnimationFrame油門(mén)滾動(dòng)事件
• ?避免一次動(dòng)畫(huà)元素
• ?在移動(dòng)設(shè)備上測(cè)試 - 一種與沈重的JS視差鬥爭(zhēng)

基本上，JavaScript可為您提供對(duì)視差效應(yīng)的細(xì)粒度控制。無(wú)論您是構(gòu)建簡(jiǎn)單的背景滾動(dòng)還是多層講故事網(wǎng)站，將滾動(dòng)跟蹤與transform和智能活動(dòng)的處理相結(jié)合，都可以使其流暢而引人入勝。只是不要過(guò)度使用它 - 簡(jiǎn)單通常效果最好。

以上是使用JavaScript創(chuàng)建視差滾動(dòng)效果的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！