Having an element with the v-rellax directive, I'm utilizing it for prallax scrolling in this particular div:
<div id="image" v-rellax="{ speed: -5 }"></div>
Currently, there's a need to adjust the speed property to -3 to suit a different screen width. Is it possible to change the speed using:
1. a `media query`
2. `vue.js`
3. `javascript`
Is there a straightforward method to accomplish this with vue?
Edit:
Despite trying to implement the suggested solution, the parallax scroll ceases to work correctly. Am I doing something incorrectly?
<script>
export default {
name: "home",
data: { rellax_speed: -5 },
created() {
window.addEventListener('resize', (event) => {
if (event.target.innerWidth >= 576) {
this.rellax_speed = -3;
return;
}
this.rellax_speed = -5;
})
}
}
</script>
template:
<div id="image" v-rellax="{ speed: rellax_speed }"></div>
Edit2:
<script>
export default {
name: "home",
data() {
return {
r_speed: -5
}
},
methods: {
onresize(event) {
if (event.target.innerWidth >= 576) {
this.r_speed = -3;
return;
}
this.r_speed = -5
}
},
created() {
window.addEventListener("resize", this.onresize)
},
beforeDestroy() {
window.removeEventListener("resize", this.onresize, true)
}
}
</script>
template:
<div id="image" v-rellax="{ speed: r_speed }"></div>