CSS Parallax “Explore Space” effect with HTML, CSS, JS (scroll animation)

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
I used masked images. You can choose to use unmasked pngs.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Jupiter, Neptune and Saturn! You could also use Pluto!
<div id="section-1" className="parallax-container"></div>
<div id="section-2" className="planets-container"></div>
.parallax-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.planets-container {
position: relative;
height: 100vh;
padding: 100px 200px;
}
The HTML<div className={`background-3 ${passed ? "scale" : ""}`}></div>
<div className={`background-1 ${passed ? "scale" : ""}`}></div>
<div className={`background-2 ${passed ? "scale" : ""}`}></div>
<div className={`text-block ${moveRight ? 'flow-right' : passed ? "scale" : ""}`}>
<p className="main">EXPLORE</p>
<p className="sub">THE SPACE</p>
</div>
.background-1 {
background: url("/spaceExplore/background1.png");
transform: scale(1.4);
transition: transform 1.5s ease;
@extend .background-const;
&.scale {
transform: scale(1);
}
}
.background-2 {
background: url("/spaceExplore/background1.png");
transition: transform 1.5s ease;
@extend .background-const;
&.scale {
transform: scale(1.4);
}
}
.background-3 {
background: url("/spaceExplore/background1.png");
transition: transform 1.5s ease;
@extend .background-const;
&.scale {
transform: scale(1.4);
}
}
.background-const {
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
.text-block {
position: absolute;
transform: translate(0, 100%);
transition: transform 1.5s ease;

&.flow-right {
transform: translate(100%, 0);
}

&.scale {
transform: translate(0, 0);
}
}
<div id="section-2" className="planets-container">
<div id="bringTogether" className="h-100 planets-centered row">
<div className={`h-100 neptune col-6 ${together ? "together" : ""}`}>
<div id="section2" className="h-100 neptune-bg">
<p>Neptune</p>
<img
src="/spaceExplore/neptune.png"
className="h-100 invisible"
alt=""
/>
</div>
</div>
<div className="col-6 h-100 right-planets">
<div className={`jupiter ${together ? "together" : ""}`}>
<div className="h-100 jupiter-bg">
<p>Jupiter</p>
<img
src="/spaceExplore/jupiter.png"
className="h-100 invisible"
alt=""
/>
</div>
</div>
<div className={`saturn ${together ? "together" : ""}`}>
<div className="h-100 saturn-bg">
<p>Saturn</p>
<img
src="/spaceExplore/saturn.png"
className="h-100 invisible"
alt=""
/>
</div>
</div>
</div>
</div>
</div>
.neptune {
transform: translateX(-20%) scale(0.6);
transition: transform 1s ease;
}
.saturn {
height: 48%;
transform: translate(20%, 10%) scale(0.6);
transition: transform 1s ease;
}
.jupiter {
height: 48%;
transform: translate(20%, -10%) scale(0.6);
transition: transform 1s ease;
}
const [passed, setPassed] = useState(false)
const [step, setStep] = useState(0)
const [fire, setFire] = useState(true)
const [together, setTogether] = useState(false)
const [moveRight, setMoveRight] = useState(false)
useEffect(() => {
if (step === 0) {
setBodyOverflow("hidden");
}
})
const setBodyOverflow = val => {
document.getElementsByTagName("body")[0].style.overflow = val;
};
useEffect(() => {
if (step === 0) {
setBodyOverflow("hidden");
window.addEventListener("wheel", fire ? scrollHandler : () => {});
}
})
useEffect(() => {
if (step === 0) {
setBodyOverflow("hidden");
window.addEventListener("wheel", fire ? scrollHandler : () => {});
return () => {
window.removeEventListener("wheel", scrollHandler);
}
}
})
const scrollHandler = event => {
setFire(false);
setTimeout(() => {
setFire(true);
}, 1500);
if (event.deltaY < 0) {
if (step > 0) {
setMoveRight(false)
setStep(step => step - 1);
setTogether(false);
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
if (passed && step === 1) {
setPassed(false);
setBodyOverflow("hidden");
}
}
} else if (event.deltaY > 0) {
if (step < 3) {
setStep(step => step + 1);
setPassed(true);
if (step === 1) {
setMoveRight(true)
setBodyOverflow("auto");
setTogether(true);
window.scrollTo({
top: 1000,
left: 0,
behavior: 'smooth'
});
}
}
}
};

ReactJS, NextJS, NodeJS and every other JS! It’s like a never ending learning journey. 😎

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store