Как сделать параллаксную прокрутку изображения ⇐ CSS

[Anonymous]

Я пытаюсь использовать фоновое вложение: исправлено; и трансформируем: TranslateZ(-300px) Scale(2); это увеличит мое изображение. Внутренний размер 1920x750 и отображаемый размер 1440x563 пикселей (размер баннера)
просто хочу использовать мой отображаемый размер для прокрутки параллакса
мой HTML


















css
.hero_uniform,
.cap_section {
perspective: 1;
transform-style: preserve-3d;
overflow-y: scroll;
height: 100vh;
}

.banner_img {
width: 100%;
position: relative;
overflow: hidden;
z-index: -1;
}

.banner_img img {
width: 100%;
}

js

export default {
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
const heroUniform = this.$refs.heroUniform;
const capSection1 = this.$refs.capSection1;
const capSection2 = this.$refs.capSection2;

const scrollY = window.scrollY;

heroUniform.style.transform = `translateY(${scrollY * 0.5}px)`;
capSection1.style.transform = `translateY(${scrollY * 0.3}px)`;
capSection2.style.transform = `translateY(${scrollY * 0.1}px)`;
}
}
}



Подробнее здесь: https://stackoverflow.com/questions/787 ... with-image