Parallax Scrolling Website, How to Make Website using HTML CSS and Javascript #parallax #css
Parallax Scrolling Website, How to Make Website using HTML CSS and Javascript #parallax #css.
This Content is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.
You Can Use & Start Project From Scratch And Get Source Code from here and support me ❤ You can Motivate me through Paying using UPI , Your Single Panny will be Countable. UPI_ID : CodingGenius@ybl , CodingGenius@ibl .
And Don’t Forget To Subscribe My Youtube Channel To motivate me So I can Give You more Valuable Content .
" https://www.youtube.com/@Codingenius "
Home
Hill-1
Hill-2
Hill-3
Hill-4
Hill-5
Leaf
Plant
Tree
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parallax Scrolling Website | Coding Genius!</title>
<link rel="stylesheet" href="/Css/style.css" />
</head>
<header>
<h2 class="logo">Logo</h2>
<nav class="navigation">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>
<section class="parallax">
<img src="Images/hill1.png" alt="" id="hill1" />
<img src="Images/hill2.png" alt="" id="hill2" />
<img src="Images/hill3.png" alt="" id="hill3" />
<img src="Images/hill4.png" alt="" id="hill4" />
<img src="Images/hill5.png" alt="" id="hill5" />
<img src="Images/tree.png" alt="" id="tree" />
<img src="Images/leaf.png" alt="" id="leaf" />
<h2 id="text">Parallax Website Using Html Css & Js</h2>
<img src="Images/plant.png" alt="" id="plant" />
</section>
<section class="sec">
<h2>Parallax Scrolling website!</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe asperiores
ab totam delectus quod id hic voluptate nisi quas officia ipsa natus
laborum est blanditiis ut, vitae quam dolore. Illum modi, eligendi dolore
fugit nesciunt ab laborum a atque ipsum delectus quibusdam similique minus
blanditiis eaque ullam, adipisci, cum itaque corrupti amet illo
necessitatibus? Nobis neque consectetur vel quia, suscipit esse fuga
exercitationem voluptates. Magnam aliquam quo adipisci distinctio non
accusamus autem earum! Voluptatem fuga porro voluptate nihil, assumenda
beatae eius quod reprehenderit aliquam repellendus facere, voluptas
tenetur placeat doloremque repudiandae quisquam, ex voluptates distinctio
ipsum quas hic. Vitae ea, ullam corrupti ab ex, ducimus, blanditiis
adipisci quidem qui repellat culpa dolore eveniet possimus saepe delectus?
Eius dolor, beatae veniam in architecto corrupti pariatur, error id,
voluptates eveniet voluptatibus repellendus.
<br /><br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe asperiores
ab totam delectus quod id hic voluptate nisi quas officia ipsa natus
laborum est blanditiis ut, vitae quam dolore. Illum modi, eligendi dolore
fugit nesciunt ab laborum a atque ipsum delectus quibusdam similique minus
blanditiis eaque ullam, adipisci, cum itaque corrupti amet illo
necessitatibus? Nobis neque consectetur vel quia, suscipit esse fuga
exercitationem voluptates. Magnam aliquam quo adipisci distinctio non
accusamus autem earum! Voluptatem fuga porro voluptate nihil, assumenda
beatae eius quod reprehenderit aliquam repellendus facere, voluptas
tenetur placeat doloremque repudiandae quisquam, ex voluptates distinctio
ipsum quas hic. Vitae ea, ullam corrupti ab ex, ducimus, blanditiis
adipisci quidem qui repellat culpa dolore eveniet possimus saepe delectus?
Eius dolor, beatae veniam in architecto corrupti pariatur, error id,
voluptates eveniet voluptatibus repellendus.
<br /><br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe asperiores
ab totam delectus quod id hic voluptate nisi quas officia ipsa natus
laborum est blanditiis ut, vitae quam dolore. Illum modi, eligendi dolore
fugit nesciunt ab laborum a atque ipsum delectus quibusdam similique minus
blanditiis eaque ullam, adipisci, cum itaque corrupti amet illo
necessitatibus? Nobis neque consectetur vel quia, suscipit esse fuga
exercitationem voluptates. Magnam aliquam quo adipisci distinctio non
accusamus autem earum! Voluptatem fuga porro voluptate nihil, assumenda
beatae eius quod reprehenderit aliquam repellendus facere, voluptas
tenetur placeat doloremque repudiandae quisquam, ex voluptates distinctio
ipsum quas hic. Vitae ea, ullam corrupti ab ex, ducimus, blanditiis
adipisci quidem qui repellat culpa dolore eveniet possimus saepe delectus?
Eius dolor, beatae veniam in architecto corrupti pariatur, error id,
voluptates eveniet voluptatibus repellendus.
<br /><br />
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe asperiores
ab totam delectus quod id hic voluptate nisi quas officia ipsa natus
laborum est blanditiis ut, vitae quam dolore. Illum modi, eligendi dolore
fugit nesciunt ab laborum a atque ipsum delectus quibusdam similique minus
blanditiis eaque ullam, adipisci, cum itaque corrupti amet illo
necessitatibus? Nobis neque consectetur vel quia, suscipit esse fuga
exercitationem voluptates. Magnam aliquam quo adipisci distinctio non
accusamus autem earum! Voluptatem fuga porro voluptate nihil, assumenda
beatae eius quod reprehenderit aliquam repellendus facere, voluptas
tenetur placeat doloremque repudiandae quisquam, ex voluptates distinctio
ipsum quas hic. Vitae ea, ullam corrupti ab ex, ducimus, blanditiis
adipisci quidem qui repellat culpa dolore eveniet possimus saepe delectus?
Eius dolor, beatae veniam in architecto corrupti pariatur, error id,
voluptates eveniet voluptatibus repellendus.
<br /><br />
</p>
</section>
<body>
<script src="Js/script.js"></script>
</body>
</html>
Style.css
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background: #f9f9f9;
min-height: 100vh;
overflow-x: hidden;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: flex-start;
align-items: center;
z-index: 100;
}
.logo {
font-size: 2em;
color: rgb(6, 143, 143);
pointer-events: none;
margin-right: 270px;
}
.navigation a {
text-decoration: none;
color: rgb(6, 143, 143);
padding: 6px 15px;
border-radius: 20px;
margin: 0 10px;
font-weight: 600;
}
.navigation a:hover,
.navigation a.active {
background: rgb(6, 143, 143);
color: #fff;
}
.parallax {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#text {
position: absolute;
font-size: 3.5em;
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.parallax img {
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
}
.sec {
position: relative;
background: #003329;
padding: 100px;
}
.sec h2 {
font-size: 2.5em;
color: #fff;
margin-bottom: 10px;
}
.sec p {
font-size: 1em;
color: #fff;
font-weight: 300;
}
Script.Js
let text = document.getElementById("text");
let leaf = document.getElementById("leaf");
let hill1 = document.getElementById("hill1");
let hill4 = document.getElementById("hill4");
let hill5 = document.getElementById("hill5");
window.addEventListener("scroll", () => {
let value = window.scrollY;
text.style.marginTop = value * 2.5 + "px";
leaf.style.top = value * -1.5 + "px";
leaf.style.left = value * 1.5 + "px";
hill5.style.left = value * 1.5 + "px";
hill4.style.left = value * -1.5 + "px";
hill1.style.top = value * 1 + "px";
});
Related Videos:
1. Build a Complete Responsive Personal Portfolio Website using HTML CSS Javascript
https://youtu.be/C6IE2bcS47c
2. Build a Complete Responsive Personal Portfolio Website using HTML CSS Javascript | Dark
And Light Mode
https://youtu.be/ftWF2fP3EIk
Related PlayList:
1. Full Tutorial For Css Flex and Grid System in Web Development .
https://www.youtube.com/playlist?list=PLbBqedyzVdDvdrxb6wTG18PGAFGxU9iYX
2. Full Tutorial For Jasmine Unit Testing Using JavaScript And Angular.
https://www.youtube.com/playlist?list=PLbBqedyzVdDsUINNDz2uVX6fPldppKs6k
3. PlayList For Responsive Web Development Using Html, Css, Js , React And Angular .
https://www.youtube.com/playlist?list=PLbBqedyzVdDuMhoixLt94NqWuQlQhTaWm
Thanks For Your Love And Support.
Comments
Post a Comment