Parallax Page

/* Set the height of the body to the full screen height */
body {
height: 100vh;
margin: 0;
padding: 0;
overflow-x: hidden;
}

/* Set the height and width of the layers */
.layer {
height: 100vh;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

/* Set the position and z-index of each layer */
.layer-1 {
z-index: 4;
background-image: url(‘layer1.jpg’);
}

.layer-2 {
z-index: 3;
background-image: url(‘layer2.jpg’);
}

.layer-3 {
z-index: 2;
background-image: url(‘layer3.jpg’);
}

.layer-4 {
z-index: 1;
background-image: url(‘layer4.jpg’);
}

Welcome to My Parallax Page

This is the top layer of my page

What is Parallax?

Parallax is a visual effect that creates the illusion of depth and motion

How to Create Parallax

To create a parallax effect, use HTML, CSS, and JavaScript to create layers of content that move at different speeds as the user scrolls

Conclusion

Parallax is a fun and creative way to add depth and dimension to your website



window.addEventListener(‘scroll’, function() {
var scrollPosition = window.pageYOffset;

document.querySelector(‘.layer-1’).style.transform = ‘translateY(‘ + scrollPosition * 0.4 + ‘px)’;
document.querySelector(‘.layer-2’).style.transform = ‘translateY(‘ + scrollPosition * 0.3 + ‘px)’;
document.querySelector(‘.layer-3’).style.transform = ‘translateY(‘ + scrollPosition * 0.2 + ‘px)’;
document.querySelector(‘.layer-4’).style.transform = ‘translateY(‘ + scrollPosition * 0.1 + ‘px)’;
});