所以我試著根據一個教程制作一個視差效果，html和ccs工作正常但是javascript完全沒有反應。圖像是完全靜態的，不會對鼠標移動做出反應，它們是按照css文件中的定義放置的。我想讓圖像在鼠標移動時移動，如下所示。

我試圖用getElementByClassName修復它，但它什么也沒做。以下是相關html、css和javascript代碼的摘錄:

<main>
  <div class="vignette"></div>
  <img src="img/background.png" data-speedx="0.3" data-speedy="0.38" data-speedz="0.0" data-rotation="0" class="parallax bg-img">
  <img src="img/fog_7.png" data-speedx="0.27" data-speedy="0.32" data-speedz="0.0" data-rotation="0" class="parallax fog-7">
  <img src="img/mountain_10.png" data-speedx="0.195" data-speedy="0.195" data-speedz="0.0" data-rotation="0" class="parallax mountain-10">
  <img src="img/fog_6.png" data-speedx="0.25" data-speedy="0.28" data-speedz="0.0" data-rotation="0" class="parallax fog-6">
  <img src="img/mountain_9.png" data-speedx="0.125" data-speedy="0.155" data-speedz="0.15" data-rotation="0.02" class="parallax mountain-9">
  <img src="img/mountain_8.png" data-speedx="0.1" data-speedy="0.11" data-speedz="0.02" data-rotation="0" class="parallax mountain-8">
  <img src="img/fog_5.png" data-speedx="0.16" data-speedy="0.105" data-speedz="0.0" data-rotation="0" class="parallax fog-5">
  <img src="img/mountain_7.png" data-speedx="0.1" data-speedy="0.1" data-speedz="0.09" data-rotation="0" class="parallax mountain-7">
  <div class="text parallax" data-speedx="0.07" data-speedy="0.07" data-rotation="0.11"> 
    <h2>Shoot for the moon</h2>
    <h1>If you miss, you'll land among the stars</h1>
  </div>
  <img src="img/mountain_6.png" data-speedx="0.065" data-speedy="0.05" data-speedz="0.05" data-rotation="0.12" class="parallax mountain-6">
  <img src="img/fog_4.png" data-speedx="0.135" data-speedy="0.115" data-speedz="0.0" data-rotation="0" class="parallax fog-4">
  <img src="img/mountain_5.png" data-speedx="0.08" data-speedy="0.024" data-speedz="0.13" data-rotation="0.1" class="parallax mountain-5">
  <img src="img/fog_3.png" data-speedx="0.11" data-speedy="0.018" data-speedz="0.0" data-rotation="0" class="parallax fog-3">
  <img src="img/mountain_4.png" data-speedx="0.059" data-speedy="0.024" data-speedz="0.35" data-rotation="0.14" class="parallax mountain-4">
  <img src="img/mountain_3.png" data-speedx="0.04" data-speedy="0.018" data-speedz="0.32" data-rotation="0.05" class="parallax mountain-3">
  <img src="img/fog_2.png" data-speedx="0.15" data-speedy="0.115" data-speedz="0.0" data-rotation="0" class="parallax fog-2">
  <img src="img/mountain_2.png" data-speedx="0.0235" data-speedy="0.013"  data-speedz="0.42" data-rotation="0.15" class="parallax mountain-2">
  <img src="img/mountain_1.png" data-speedx="0.027" data-speedy="0.018" data-speedz="0.53" data-rotation="0.2" class="parallax mountain-1">
  <img src="img/sun_rays.png" class="sun-rays hide">
  <img src="img/black_shadow.png" class="black-shadow hide">
  <img src="img/fog_1.png" data-speedx="0.12" data-speedy="0.01" class="parallax fog-1">
 </main>

main{
    position: relative;
    background-color: rgb(56, 38, 172);
    max-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
}

.parallax {
    pointer-events: none;
    transition: 0.45s (cubic-bezier(.2,.49,.32,.99));
    transform: translate(-50%, -50%);
}

.bg-img {
    position: absolute;
    width: 2800px;
    top: calc(50% - 390px);
    left: calc(50% + 10px);
    z-index: 1;
}

.fog-7 {
    position: absolute;
    z-index: 2;
    width: 1900px;
    top: calc(50% - 100px);
    left: calc(50% + 300px);
}

.mountain-10 {
    position: absolute;
    z-index: 3;
    width: 892px;
    top: calc(50% + 69px);
    left: calc(50% + 230px);
}

.fog-6 {
    position: absolute;
    z-index: 4;
    width: 1610px;
    top: calc(50% + 85px);
    left: calc(50% + 10px);
}

.mountain-9 {
    position: absolute;
    z-index: 5;
    width: 470px;
    top: calc(50% + 113px);
    left: calc(50% - 457px);
}

.mountain-8 {
    position: absolute;
    z-index: 6;
    width: 810px;
    top: calc(50% + 86px);
    left: calc(50% - 202px);
}

.mountain-7 {
    position: absolute;
    z-index: 7;
    width: 538px;
    top: calc(50% + 123px);
    left: calc(50% - 305px);
}

.text {
    position: absolute;
    z-index: 8;
    top: 30%;
    left: 50%;
    text-align: center;
    text-transform: uppercase;
    pointer-events: auto;
    color: black;
}

.text h2 {
    font-weight: 100;
    font-size: 3rem;
    line-height: 1.2;
}

.text h1 {
    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1;
}

.mountain-6 {
    position: absolute;
    z-index: 9;
    width: 408px;
    top: calc(50% + 60px);
    left: calc(50% + 590px);
}

.fog-6 {
    position: absolute;
    z-index: 10;
    width: 590px;
    top: calc(50% + 60px);
    left: calc(50% - 590px);
}

.fog-4 {
    position: absolute;
    z-index: 11;
    width: 590px;
    top: calc(50% + 223px);
    left: calc(50% - 60px);
}

.mountain-5 {
    position: absolute;
    z-index: 12;
    width: 408px;
    top: calc(50% + 250px);
    left: calc(50% + 130px);
}

.fog-3 {
    position: absolute;
    z-index: 13;
    width: 1600px;
    top: calc(50% + 110px);
    left: calc(50% - 15px);
}

.mountain-4 {
    position: absolute;
    z-index: 14;
    width: 780px;
    top: calc(50% + 153px);
    left: calc(50% - 385px);
}

.mountain-3
{
    position: absolute;
    z-index: 15;
    width: 419px;
    top: calc(50% + 133px);
    left: calc(50% + 736px);
}


.fog-2 {
    position: absolute;
    z-index: 16;
    width: 590px;
    top: calc(50% + 147px);
    left: calc(50% - 30px);
}

.mountain-2 {
    position: absolute;
    z-index: 17;
    width: 690px;
    top: calc(50% + 154px);
    left: calc(50% + 412px);
}


.mountain-1 {
    position: absolute;
    z-index: 18;
    width: 408px;
    top: calc(50% + 17px);
    left: calc(50% - 601px);
}

.sun-rays {
    position: absolute;
    z-index: 19;
    top: 0;
    right: 0;
    pointer-events: none;
    width: 595px;
}

.black-shadow {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 0;
    pointer-events: none;
    width: 595%;
}

.fog-1 {
    position: absolute;
    z-index: 21;
    width: 1600px;
    top: calc(100% - 355px);
    left: 50%;
}

.vignette {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7))
}

const parallax_el = document.querySelectorAll(".parallax");

let xValue = 0, 
  yValue = 0;
let rotateDegree = 0; 

function update(cursorPosition) {
  parallax_el.forEach ((el) => {
    let speedx = el.dataset.speedx;
    let speedy = el.dataset.speedy;
    let speedz = el.dataset.speedz;
    let rotateSpeed = el.dataset.rotation;

    el.style.transform = `translateX(calc(-50% +${-xValue*speedx}px)) rotateY(${rotateDegree*rotateSpeed}deg) translateY(calc(50% +${yValue*speedy}px)) perspective(2300px) translateZ(${zValue*speedz}px)`;
  });
}

update(0);
    
window.addEventListener("mousemove", (e) => {
  xValue = e.clientX - window.innerWidth / 2;
  yValue = e.clientY - window.innerHeight / 2;

  rotateDegree = (xValue / (window.innerWidth / 2))*20;

  update(e.clientX);

  let zValue = (cursorPosition - parseFloat(getComputedStyle(el).left))*isInLeft * 0.1;
  let isInLeft = parseFloat(getComputedStyle(el).left) < window.innerWidth / 2 ? 1: -1;
  
});