Hey there, You are most welcome to this article. Today we are going to create a Mountain Parallax landing page using HTML CSS and JS. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.
what is Parallax landing page
Parallax landing pages use a background that moves slower than the foreground during scroll. This creates a 3D effect that — when used in moderation — can create a more rich, pleasing experience for your visitors.
Parallax landing page HTML CODE
1. Background Section (`#top`):
– This section (<section id=”top”>) contains elements related to the top part of the page.
– It includes:
– Background image (<img src=”…”>): A scenic image of mountains serving as the background.
– Heading (<h2 id=”text”>Mountains</h2>): A heading displaying the text “Mountains”.
– Images of a man, clouds, and mountains: These images are placed strategically to create a parallax effect.
2. Welcome Section (`#sec`):
– This section (<section id=”sec”>) contains content welcoming visitors to the mountains.
– It includes:
– Heading (<h2>Welcome to the Mountains</h2>): A welcoming heading for visitors.
– Paragraph (<p>): A paragraph element where additional content could be placed, describing the experience or providing information about the mountains.
3. Footer Section:
– This section (<footer>) contains links/icons for navigation or other purposes.
– It includes:
– Links with icons: Each link (<a href=””><i class=”fa-solid fa-[icon-name]”></i></a>) has an icon representing different actions or destinations. Icons include a house, mountain with sun, person hiking, group of people, and gears.
4. Partial HTML:
– The comment <!– partial –> signifies the end of the partial HTML code.
– This suggests that the provided HTML might be a partial code snippet extracted from a larger HTML file.
5. Script Tag:
– This <script> tag links to an external JavaScript file named “script.js”.
– It indicates that there might be JavaScript code associated with the HTML for interactivity or functionality.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Mountain Hero Page By Shobhit</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<section id="top">
<img decoding="async" src="https://aryan-tayal.github.io/Mountains-Parallax/bg.jpg" id="bg" />
<h4 id="text">Mountains</h2>
<img decoding="async" src="https://aryan-tayal.github.io/Mountains-Parallax/man.png" id="man" />
<img decoding="async" src="https://aryan-tayal.github.io/Mountains-Parallax/clouds_1.png" id="clouds_1" />
<img decoding="async" src="https://aryan-tayal.github.io/Mountains-Parallax/clouds_2.png" id="clouds_2" />
<img decoding="async" src="https://aryan-tayal.github.io/Mountains-Parallax/mountain_left.png" id="mountain_left" />
<img decoding="async" src="https://aryan-tayal.github.io/Mountains-Parallax/mountain_right.png
" id="mountain_right" />
</section>
<section id="sec">
<h4>Welcome to the Mountains</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. A earum ipsam laboriosam mollitia, architecto esse voluptates eligendi provident soluta et cupiditate sit nisi at dolorum iure dignissimos cumque amet necessitatibus blanditiis? Earum assumenda soluta reiciendis recusandae, incidunt tenetur nihil adipisci corrupti, quibusdam ullam numquam iusto veritatis facilis ab dicta, nobis inventore eius magni eveniet quo? Repellat nobis quos, facilis quam perspiciatis asperiores delectus, aliquid nihil molestias in at modi nulla minima deleniti. Minima aliquid magnam libero reiciendis et, nesciunt repellendus eum vel rerum alias ea enim fugiat eius. Quae dolores, amet nam ab officiis corrupti sequi eligendi quo culpa illum.
</p>
</section>
<footer>
<a href=""><i class="fa-solid fa-house"></i></a>
<a href=""><i class="fa-solid fa-mountain-sun"></i></a>
<a href=""><i class="fa-solid fa-person-hiking"></i></a>
<a href=""><i class="fa-solid fa-people-group"></i></a>
<a href=""><i class="fa-solid fa-gears"></i></a>
</footer>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
Parallax landing page CSS CODE
1. Importing Fonts:
– @import url(‘https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap’);: This imports the Montserrat font from Google Fonts with various weights and styles.
2. Global Styles:
– *: Selects all elements on the page.
– margin: 0; padding: 0;: Removes default margin and padding from all elements.
– box-sizing: border-box;: Applies border-box box-sizing to all elements.
– font-family: ‘Montserrat’, serif;: Sets the font family for all elements to Montserrat.
3. Body Styles:
– body: Selects the body element.
– height: 100vh; width: 100vw;: Sets the height and width of the body to 100% of the viewport height and width respectively.
4. Top Section Styles (`#top`):
– #top: Selects the element with the id “top” (presumably the top section of your webpage).
– position: relative;: Positions the element relative to its normal position on the page.
– width: 100%; height: 100%;: Sets the width and height of the element to 100% of its containing block.
– overflow: hidden;: Clips the content that overflows the element’s box.
– display: flex; justify-content: center; align-items: center;: Centers the child elements horizontally and vertically within the container.
– #top::before: Selects a pseudo-element before the content of the top section.
– content: ”;: Inserts empty content.
– position: absolute; bottom: 0; left: 0;: Positions the pseudo-element at the bottom left corner of the top section.
– height: 200px; width: 100%;: Sets the height to 200 pixels and width to 100% of the top section.
– background: linear-gradient(to top, #fff, transparent);: Creates a gradient background from white to transparent, simulating a fade effect at the bottom of the top section.
– z-index: 1000;: Places the pseudo-element above other elements in the stacking order.
5. Image Styles (`section img`, `#man`):
– section img: Selects all images within sections.
– position: absolute; top: 0; left: 0;: Positions the images at the top left corner of their containing section.
– width: 100%; height: 100%;: Sets the width and height of the images to cover the entire section.
– object-fit: cover;: Scales the image as large as possible while maintaining its aspect ratio and cropping any excess.
– pointer-events: none;: Specifies that the image should not receive pointer events.
– #man: Selects the element with the id “man”.
– bottom: 0;: Positions the element at the bottom of its containing block.
6. Text Styles (`#text`, `#sec h2`, `#sec p`):
– #text: Selects the element with the id “text”.
– color: white; font-size: 10rem;: Sets the text color to white and font size to 10rem (160 pixels).
– #sec h2: Selects the <h2> elements within the section with the id “sec”.
– font-size: 4rem; margin-bottom: 30px; color: #20496a;: Sets the font size to 4rem (64 pixels), adds a bottom margin of 30 pixels, and sets the text color to a shade of blue (#20496a).
– #sec p: Selects the <p> elements within the section with the id “sec”.
– font-size: 1.2rem; line-height: 2rem; font-weight: 300; color: #20496a;: Sets the font size to 1.2rem (20 pixels), line height to 2rem (32 pixels), font weight to 300 (light), and text color to a shade of blue (#20496a).
7. Footer Styles (`footer`, `footer a`, `footer a i`):
– footer: Selects the footer element.
– margin-top: 30px; display: flex; padding: 20px; justify-content: space-evenly; align-items: center; background-color: #B0DFEA;: Adds a top margin of 30 pixels, displays flex layout, adds padding of 20 pixels, evenly distributes space between child elements, aligns items to the center, and sets the background color to a light blue (#B0DFEA).
– footer a: Selects anchor elements within the footer.
– color: #20496a;: Sets the text color to a shade of blue (#20496a).
– footer a i: Selects icons within anchor elements in the footer.
– transition: 0.2s;: Adds a transition effect with a duration of 0.2 seconds.
– footer a:nth-of-type(3),footer a:nth-of-type(4), footer a:nth-of-type(5): Selects the third, fourth, and fifth anchor elements in the footer.
– font-size: 1.3rem;: Sets the font size to 1.3rem (20.8 pixels).
8. Hover Effect (`footer a i:hover`):
– footer a i:hover: Selects icons within anchor elements in the footer on hover.
– transform: translateY(-10px);: Translates the icons 10 pixels upward on hover.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', serif;
/* overflow-x: hidden; */
}
body {
height: 100vh;
width: 100vw;
}
#top{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
#top::before{
content:'';
position: absolute;
bottom: 0;
left: 0;
height:200px;
width: 100%;
background:linear-gradient(to top,#fff,transparent);
z-index: 1000;
}
#man{
top: inherit;
bottom: 0;
}
section img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
#text{
position: relative;
color:white;
font-size: 10rem;
}
#sec{
padding:100px;
padding-bottom:20px;
}
#sec h2{
font-size: 4rem;
margin-bottom: 30px;
color:#20496a;
}
#sec p{
font-size: 1.2rem;
line-height:2rem;
font-weight:300;
color:#20496a;
}
footer{
margin-top:30px;
display:flex;
padding:20px;
justify-content:space-evenly;
align-items:center;
background-color:#B0DFEA;
}
footer a{
color:#20496a;
}
footer a i{
transition:0.2s;
}
footer a:nth-of-type(3),footer a:nth-of-type(4), footer a:nth-of-type(5){
font-size:1.3rem;}
footer a i:hover{
transform:translateY(-10px);
}
Parallax landing page JS CODE
This JavaScript code adds functionality to your webpage by creating a parallax effect as the user scrolls. Let’s break it down:
1. Selecting Elements:
– const mountainLeft = document.querySelector(‘#mountain_left’);: Selects the element with the id “mountain_left” and assigns it to the variable mountainLeft.
– const mountainRight = document.querySelector(‘#mountain_right’);: Selects the element with the id “mountain_right” and assigns it to the variable mountainRight.
– const cloud1 = document.querySelector(‘#clouds_1’);: Selects the element with the id “clouds_1” and assigns it to the variable cloud1.
– const cloud2 = document.querySelector(‘#clouds_2’);: Selects the element with the id “clouds_2” and assigns it to the variable cloud2.
– const text = document.querySelector(‘#text’);: Selects the element with the id “text” (presumably the text element) and assigns it to the variable text.
– const man = document.querySelector(‘#man’);: Selects the element with the id “man” (presumably an image of a man) and assigns it to the variable man.
2. Scroll Event Listener:
– window.addEventListener(‘scroll’,()=>{…}): Listens for the scroll event on the window and executes the callback function when scrolling occurs.
3. Updating Element Positions:
– let value = scrollY;: Retrieves the current scroll position and assigns it to the variable value.
– mountainLeft.style.left = -${value/0.7}px“: Updates the left style property of the mountainLeft element to create a parallax effect. The element moves to the left at a slower rate compared to the scroll, simulating depth.
– cloud2.style.left = -${value*2}px“: Updates the left style property of cloud2 to move it to the left at a faster rate than the scroll, creating a parallax effect.
– mountainRight.style.left = `${value/0.7}px“: Updates the `left style property of mountainRight to move it to the right at a slower rate compared to the scroll, simulating depth.
– cloud1.style.left = `${value*2}px“: Updates the `left style property of cloud1 to move it to the right at a faster rate than the scroll, creating a parallax effect.
– text.style.bottom = -${value}px“: Updates the bottom style property of the text element to move it upwards as the user scrolls, creating a parallax effect.
– man.style.height = `${window.innerHeight – value}px“: Updates the `height style property of the man element to change its height based on the scroll position, creating a dynamic effect.
Overall, this JavaScript code enables a parallax effect by updating the positions of different elements based on the scroll position, enhancing the visual experience of the webpage.
const mountainLeft = document.querySelector('#mountain_left');
const mountainRight = document.querySelector('#mountain_right');
const cloud1 = document.querySelector('#clouds_1');
const cloud2 = document.querySelector('#clouds_2');
const text = document.querySelector('#text');
const man = document.querySelector('#man');
window.addEventListener('scroll',()=>{
let value = scrollY;
mountainLeft.style.left = `-${value/0.7}px`
cloud2.style.left = `-${value*2}px`
mountainRight.style.left = `${value/0.7}px`
cloud1.style.left = `${value*2}px`
text.style.bottom = `-${value}px`;
man.style.height = `${window.innerHeight - value}px`
})
Live Preview Of Parallax landing page
See the Pen How to Make a Mountain Parallax landing page using HTML CSS and JS by Codewithshobhit (@Codewithshobhit) on CodePen.
Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.