i try with background-attachment: fixed; & transform: translateZ(-300px) scale(2); it will larger my image size. i wanted to use my original banner size to do parallax scrolling

can refer to this codepen https://codepen.io/hahacode666/pen/poXzgbe

i have try with

.section1,
.section2 ,.section3,.section4{
    perspective: 1;
    transform-style: preserve-3d;
    overflow-y: scroll;
  position:relative;


}

is it need js to handle?