How to Create a 3D Parallax Effect in CSS?
A 3D parallax effect is the effect that is able to change the background on scrolling. This article will show the implementation of a parallax scrolling effect. where it creates multiple image layers with varying depths and scales that move at different speeds while scrolling, producing a 3D-like illusion. The scrolling effect involves background images moving at a different speed than foreground elements, creating a captivating visual experience for users.
Approach
This webpage uses HTML, CSS, and JavaScript for an interactive parallax effect:
- Structure (HTML): Sets up the basic webpage layout with a title and content area.
- Styling (CSS): Defines styles for different animation layers (background, frame, text, decorations).
- Animation Layers (HTML): Creates separate divs for each layer with specific classes.
- Interaction (JavaScript): Uses GSAP library to scale elements based on mouse wheel movement, creating a parallax effect.
Note: Scrolling your mouse wheel zooms the background, text, and decorations for a visually engaging experience.
Example: This example shows the implementation of the above-explained approach.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.layer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.frame {
position: absolute;
top: 20px;
left: 20px;
width: calc(100% - 40px);
height: calc(100% - 40px);
border: 3px solid #fff;
box-sizing: border-box;
border-radius: 6px;
}
.bg {
position: absolute;
width: 100%;
height: 100%;
background: url(
https://media.w3wiki.org/wp-content/uploads/20220520123419/scenewithsickelephantdeforestation130839754.webp)
center center no-repeat;
background-size: cover;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 12px;
line-height: 1.2;
}
.deco1 {
position: absolute;
top: 30%;
left: 25%;
width: 7vw;
height: 7vw;
border-radius: 100%;
background: #fff;
}
.deco2 {
position: absolute;
top: 40%;
left: 65%;
width: 7vw;
height: 7vw;
border-radius: 100%;
background: #fff;
}
.deco3 {
position: absolute;
top: 60%;
left: 35%;
width: 7vw;
height: 7vw;
border-radius: 100%;
background: #fff;
}
</style>
</head>
<body>
<div class="layer -bg">
<div class="bg"></div>
</div>
<div class="layer -frame">
<div class="frame"></div>
</div>
<div class="layer -text">
<div class="text">
<h1>Hello GFGians!<br>I'm Mayank.
<br>I love WebDev!</h1>
</div>
</div>
<div class="layer -deco1">
<div class="deco1"></div>
</div>
<div class="layer -deco2">
<div class="deco2"></div>
</div>
<div class="layer -deco3">
<div class="deco3"></div>
</div>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js">
</script>
<script>
let scale = {
bg: 1,
text: 1,
deco1: 1,
deco2: 1,
deco3: 1,
}
window.addEventListener('wheel', event => {
// scale
scale.bg += event.deltaY / 80000
scale.text += event.deltaY / 4000
scale.deco1 += event.deltaY / 19000
scale.deco2 += event.deltaY / 6000
scale.deco3 += event.deltaY / 1000
scale.bg = Math.max(scale.bg, 1)
scale.text = Math.max(scale.text, 1)
scale.deco1 = Math.max(scale.deco1, 1)
scale.deco2 = Math.max(scale.deco2, 1)
scale.deco3 = Math.max(scale.deco3, 1)
gsap.to('.layer.-bg', {
scale: scale.bg,
duration: 1,
ease: 'power3.out'
})
gsap.to('.layer.-text', {
scale: scale.text,
duration: 1,
ease: 'power3.out'
})
gsap.to('.layer.-deco1', {
scale: scale.deco1,
duration: 1,
ease: 'power3.out'
})
gsap.to('.layer.-deco2', {
scale: scale.deco2,
duration: 1,
ease: 'power3.out'
})
gsap.to('.layer.-deco3', {
scale: scale.deco3,
duration: 1,
ease: 'power3.out'
})
})
</script>
</body>
</html>
Output: