i try to use background-attachment: fixed; and transform: translateZ(-300px) scale(2); it will make my image become larger Intrinsic size 1920×750 & rendered size 1440x563px (a banner size)
just wanna use my rendered size to do parallax scrolling
my html
<div>
<section class="hero_uniform" ref="heroUniform">
<div class="banner_img">
<img src="/img/banner_center.png" />
</div>
</section>
<section class="cap_section" ref="capSection1">
<div class="banner_img">
<img src="/img/cap_banner.png" />
</div>
</section>
<section class="cap_section" ref="capSection2">
<div class="banner_img">
<img src="/img/uniform_banner.png" />
</div>
</section>
</div>
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
<script>
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)`;
}
}
}
</script>