Parallax Scrolling website Dubai Effect | Parallax Scrolling Website How to Make Website #parallax
Parallax Scrolling website Dubai Effect | Parallax Scrolling Website How to Make Website #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
Stars
Dubai text
Burj Khalifa
Buildings
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 - Dubai | Coding Genius!</title>
<link rel="stylesheet" href="/Css/style.css" />
</head>
<body>
<header>
<h2 class="logo">Traveling!</h2>
<nav class="navbar">
<a href="#home" class="active">Home</a>
<a href="#about">About</a>
<a href="#place">Places</a>
<a href="#contact">Contacts</a>
</nav>
</header>
<section class="parallax">
<img src="Images/stars.png" alt="" id="stars" />
<img src="Images/burjkhalifa.png" alt="" id="burjk" />
<img src="Images/building.png" id="building" alt="" />
<img src="Images/dubaitext.png" alt="" id="dubaitext" />
</section>
<section class="sec">
<h2>Dubai (U.A.E.)</h2>
<h2>Parallax Scrolling Website Using Html Css & Js!</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error a saepe,
officiis impedit veniam voluptate commodi nulla? Rem incidunt hic omnis
commodi, pariatur magni molestiae nisi quisquam eius ex exercitationem
repudiandae aliquid laboriosam. Dolor hic eveniet quibusdam iste dolorem
atque, nam quasi. Pariatur quas nesciunt eveniet, quam excepturi
suscipit at temporibus, aliquid porro, aut accusamus sed voluptatem!
Cupiditate, ipsum quae nam id sapiente reprehenderit facere, aspernatur
possimus quos delectus quasi alias quisquam excepturi voluptatibus sit
eius? Ratione necessitatibus quia architecto odit sunt enim nemo!
Assumenda dolores rerum quibusdam non ducimus voluptatibus, illum quasi
quam eos consectetur magnam impedit, deleniti voluptate iure quisquam
ipsa amet qui voluptatem quia possimus, corporis tempore saepe suscipit
fugiat! Ullam esse maiores hic, minus ea vel animi exercitationem
provident iure aut, dolor commodi doloribus, totam saepe.
<br /><br />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error a saepe,
officiis impedit veniam voluptate commodi nulla? Rem incidunt hic omnis
commodi, pariatur magni molestiae nisi quisquam eius ex exercitationem
repudiandae aliquid laboriosam. Dolor hic eveniet quibusdam iste dolorem
atque, nam quasi. Pariatur quas nesciunt eveniet, quam excepturi
suscipit at temporibus, aliquid porro, aut accusamus sed voluptatem!
Cupiditate, ipsum quae nam id sapiente reprehenderit facere, aspernatur
possimus quos delectus quasi alias quisquam excepturi voluptatibus sit
eius? Ratione necessitatibus quia architecto odit sunt enim nemo!
Assumenda dolores rerum quibusdam non ducimus voluptatibus, illum quasi
quam eos consectetur magnam impedit, deleniti voluptate iure quisquam
ipsa amet qui voluptatem quia possimus, corporis tempore saepe suscipit
fugiat! Ullam esse maiores hic, minus ea vel animi exercitationem
provident iure aut, dolor commodi doloribus, totam saepe.
<br /><br />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error a saepe,
officiis impedit veniam voluptate commodi nulla? Rem incidunt hic omnis
commodi, pariatur magni molestiae nisi quisquam eius ex exercitationem
repudiandae aliquid laboriosam. Dolor hic eveniet quibusdam iste dolorem
atque, nam quasi. Pariatur quas nesciunt eveniet, quam excepturi
suscipit at temporibus, aliquid porro, aut accusamus sed voluptatem!
Cupiditate, ipsum quae nam id sapiente reprehenderit facere, aspernatur
possimus quos delectus quasi alias quisquam excepturi voluptatibus sit
eius? Ratione necessitatibus quia architecto odit sunt enim nemo!
Assumenda dolores rerum quibusdam non ducimus voluptatibus, illum quasi
quam eos consectetur magnam impedit, deleniti voluptate iure quisquam
ipsa amet qui voluptatem quia possimus, corporis tempore saepe suscipit
fugiat! Ullam esse maiores hic, minus ea vel animi exercitationem
provident iure aut, dolor commodi doloribus, totam saepe.
<br /><br />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error a saepe,
officiis impedit veniam voluptate commodi nulla? Rem incidunt hic omnis
commodi, pariatur magni molestiae nisi quisquam eius ex exercitationem
repudiandae aliquid laboriosam. Dolor hic eveniet quibusdam iste dolorem
atque, nam quasi. Pariatur quas nesciunt eveniet, quam excepturi
suscipit at temporibus, aliquid porro, aut accusamus sed voluptatem!
Cupiditate, ipsum quae nam id sapiente reprehenderit facere, aspernatur
possimus quos delectus quasi alias quisquam excepturi voluptatibus sit
eius? Ratione necessitatibus quia architecto odit sunt enim nemo!
Assumenda dolores rerum quibusdam non ducimus voluptatibus, illum quasi
quam eos consectetur magnam impedit, deleniti voluptate iure quisquam
ipsa amet qui voluptatem quia possimus, corporis tempore saepe suscipit
fugiat! Ullam esse maiores hic, minus ea vel animi exercitationem
provident iure aut, dolor commodi doloribus, totam saepe.
<br /><br />
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error a saepe,
officiis impedit veniam voluptate commodi nulla? Rem incidunt hic omnis
commodi, pariatur magni molestiae nisi quisquam eius ex exercitationem
repudiandae aliquid laboriosam. Dolor hic eveniet quibusdam iste dolorem
atque, nam quasi. Pariatur quas nesciunt eveniet, quam excepturi
suscipit at temporibus, aliquid porro, aut accusamus sed voluptatem!
Cupiditate, ipsum quae nam id sapiente reprehenderit facere, aspernatur
possimus quos delectus quasi alias quisquam excepturi voluptatibus sit
eius? Ratione necessitatibus quia architecto odit sunt enim nemo!
Assumenda dolores rerum quibusdam non ducimus voluptatibus, illum quasi
quam eos consectetur magnam impedit, deleniti voluptate iure quisquam
ipsa amet qui voluptatem quia possimus, corporis tempore saepe suscipit
fugiat! Ullam esse maiores hic, minus ea vel animi exercitationem
provident iure aut, dolor commodi doloribus, totam saepe.
<br /><br />
</p>
</section>
<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: linear-gradient(#040228 0%, #db5945 40%);
min-height: 100vh;
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: 100;
}
.logo {
color: #fff;
font-size: 2em;
cursor: default;
}
.navbar a {
color: #fff;
text-decoration: none;
margin-left: 20px;
font-weight: 600;
padding: 6px 15px;
border-radius: 20px;
}
.navbar a:hover,
.navbar a.active {
background: #a0010f;
}
.parallax {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.parallax img {
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
}
.sec {
position: relative;
padding: 100px;
background: #a0010f;
}
.sec h2 {
font-size: 3em;
color: #fff;
margin-bottom: 10px;
}
.sec h2:nth-child(2) {
font-size: 2em;
}
.sec p {
font-size: 1em;
color: #fff;
font-weight: 300;
}
Script.Js
let dubaiText = document.getElementById("dubaitext");
let burjk = document.getElementById("burjk");
let stars = document.getElementById("stars");
window.addEventListener("scroll", () => {
let value = window.scrollY;
dubaiText.style.left = value * -2 + "px";
burjk.style.top = value * 1 + "px";
stars.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