body {
margin: 0;
padding: 0;
perspective: 1px;
overflow-x: hidden;
}
.parallax {
height: 100vh;
perspective-origin: bottom;
transform-style: preserve-3d;
}
.layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform-style: inherit;
}
.background {
width: 100%;
height: 400%;
position: absolute;
top: -300%;
left: 0;
right: 0;
bottom: 0;
transform: translateZ(-1px) scale(4);
background-image: url(‘background.jpg’);
background-size: cover;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3D Parallax with HTML, CSS, and Vue JS
This is a tutorial on how to create a 3D parallax effect using HTML, CSS, and Vue JS. Parallax scrolling is a popular technique used in web design to create an illusion of depth and movement. In this tutorial, we will use Vue JS to add some interactivity to our parallax effect.
new Vue({
el: ‘#app’,
data: {
mouseX: 0,
mouseY: 0
},
methods: {
handleMouseMove(event) {
this.mouseX = event.clientX;
this.mouseY = event.clientY;
}
},
created() {
window.addEventListener(‘mousemove’, this.handleMouseMove);
},
destroyed() {
window.removeEventListener(‘mousemove’, this.handleMouseMove);
}
});
Full codenya ada dicodepen yang bisa kalian akses disini ya:
https://codepen.io/andymerskin/pen/XNMWvQ