I'm currently experimenting with creating a parallax effect using background-position and a data object.
<div class="parallaxBanner" :style="{scrollBanner}">
</div>
<script>
export default {
data: function(){
return{
scrollBanner: 0,
}
},
methods:{
scrollPosition: function(){
this.scrollbanner = window.scrollY % 0.5;
console.log(window.scrollY);
}
},
mounted() {
window.addEventListener('scroll', this.scrollPosition);
}
}
</script>
I'm not entirely sure how to target the CSS inline value, any suggestions would be greatly appreciated :)