Hey there! Today, We’re going to create a Space Parallax Scrolling effect using just HTML, CSS, and JavaScript. It’s easier than you think – no rocket science required, just a bit of coding fun.
In this tutorial, we’ll add a cool parallax scrolling effect to give your website a space-themed vibe. Whether you’re a coding beginner or seasoned explorer, this tutorial is a great way to spice up your web project.
Join me on this coding journey to the stars. Let’s keep it simple and exciting with HTML, CSS, and JavaScript. Ready to make your website feel like it’s in outer space? Let’s dive in!
HTML :
This HTML code creates a webpage with a space-themed parallax scrolling effect. It includes a header with navigation links, a section with parallax scrolling images and a heading, and a content section with Lorem Ipsum text. The theme switch button is handled by an external script (script.js). The page uses an external stylesheet (style.css) for styling.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Space Parallax Scrolling</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<header>
<a href="#" class="logo">Logo</a>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<section>
<img src="https://codingstella.com/wp-content/uploads/2024/01/download-4.png" id="stars">
<img src="https://codingstella.com/wp-content/uploads/2024/01/download-5.png" id="moon">
<img src="https://codingstella.com/wp-content/uploads/2024/01/download-6.png" id="mountains_behind">
<h2 id="text">Moon Light</h2>
<a href="#sec" id="btn">Explore</a>
<img src="https://codingstella.com/wp-content/uploads/2024/01/download-7.png" id="mountains_front">
</section>
<div class="sec" id="sec">
<h2>Parallax Scrolling Effects</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>CSS :
The CSS code is designed for a stylish webpage with a gradient background, smooth scrolling, and parallax effects. It uses the ‘Poppins’ font and features a navigation header, a main section with parallax images (moon and mountains), and a secondary section with a dark background. The design incorporates a distinctive layout and styling, creating an engaging visual experience for the user.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
background: linear-gradient(#2b1055, #7597de);
overflow-x: hidden;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
section::before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #1c0522, transparent);
z-index: 1000;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon {
mix-blend-mode: screen;
}
section img#mountains_front {
z-index: 10;
}
#text {
position: absolute;
right: -350px;
color: #fff;
white-space: nowrap;
font-size: 7.5vw;
z-index: 9;
}
#btn {
text-decoration: none;
display: inline-block;
padding: 8px 30px;
border-radius: 40px;
background: #fff;
color: #2b1055;
font-size: 1.5em;
z-index: 9;
transform: translateY(100px);
}
.sec {
position: relative;
padding: 100px;
background: #1c0522;
}
.sec h2 {
font-size: 3.5em;
margin-bottom: 10px;
color: #fff;
}
.sec p {
font-size: 1em;
color: #fff;
}JavaScript:
This below JavaScript code adds a scroll event listener to create a parallax effect on a webpage. It adjusts the styles of elements like stars, moon, mountains, text, button, and header based on the user’s scroll position, providing a dynamic and visually appealing experience.
This interactive scrolling behavior adds depth and movement to the different elements, contributing to an engaging user experience.
// Get references to the elements
const stars = document.getElementById('stars');
const moon = document.getElementById('moon');
const mountains_behind = document.getElementById('mountains_behind');
const text = document.getElementById('text');
const btn = document.getElementById('btn');
const mountains_front = document.getElementById('mountains_front');
const header = document.querySelector('header');
// Add scroll event listener
window.addEventListener('scroll', function() {
// Get the current scroll position
let value = window.scrollY;
// Update element styles based on scroll position
stars.style.left = value * 0.25 + 'px';
moon.style.top = value * 1.05 + 'px';
mountains_behind.style.top = value * 0.5 + 'px';
mountains_front.style.top = value * 0 + 'px';
text.style.marginRight = value * 4 + 'px';
text.style.marginTop = value * 1.5 + 'px';
btn.style.marginTop = value * 1.5 + 'px';
header.style.top = value * 0.5 + 'px';
});We did it! Our Space Parallax Scrolling project is now live, thanks to HTML, CSS, and JavaScript. Whether you’re a coding whiz or just getting started, you’ve got a cool webpage with a spacey parallax effect. Hope you had fun exploring space with code!
If you run into any problems with your project, worry not. The remedy is just a click away—Download the source code and confront your coding challenges with enthusiasm. Enjoy your coding adventure!
