71 lines
1.3 KiB
Vue
71 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="bgdrop"></div>
|
|
<div class="bggatter__wrapper">
|
|
<div class="bggatter" ref="bggatter" :style="cssVars"></div>
|
|
</div>
|
|
<div class="bgmask"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
offsetX: { type: Number, default: 0 },
|
|
};
|
|
},
|
|
computed: {
|
|
cssVars() {
|
|
return "transform: translateY(-" + this.offsetX / 2 + "px);";
|
|
}
|
|
},
|
|
methods: {
|
|
handleScroll: function(e) {
|
|
this.offsetX = window.scrollY;
|
|
}
|
|
},
|
|
beforeMount() {
|
|
window.addEventListener("scroll", this.handleScroll);
|
|
},
|
|
destroyed() {
|
|
window.removeEventListener("scroll", this.handleScroll);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bgdrop {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
z-index: -10;
|
|
background-color: theme("colors.purple-0");
|
|
}
|
|
|
|
.bggatter {
|
|
width: 100%;
|
|
height: 1000000px;
|
|
position: absolute;
|
|
z-index: -9;
|
|
mask-image: url("/images/tiles/grid.png");
|
|
background-color: theme("colors.purple-1");
|
|
|
|
&__wrapper {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
overflow: hidden;
|
|
z-index: -9;
|
|
}
|
|
}
|
|
|
|
.bgmask {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: fixed;
|
|
z-index: -8;
|
|
background-image: linear-gradient(#0000 50%, theme("colors.purple-0"));
|
|
}
|
|
</style>
|