Parallax Horror Scrolling website | Parallax Scrolling Website| How to Make Website #parallax
Parallax Horror Scrolling website | Parallax Scrolling Website| How to Make Website #parallax
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
Tree Right
Tree Left
Grass
Gate Right
Gate Left
BackGround Image - 1
Back Ground -2
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 With Horror Effect | Coding Genius!
</title>
<link rel="stylesheet" href="/Css/style.css" />
</head>
<body>
<header>
<h2 class="logo">Horror Effect!</h2>
<nav class="navigation">
<a href="#home" class="active">Home <span></span></a>
<a href="#about">About <span></span></a>
<a href="#service">Services <span></span></a>
<a href="#contact">Contacts <span></span></a>
</nav>
</header>
<section class="parallax">
<h2 id="text">Parallax Effects Website!</h2>
<img src="/Images/tree-left.png" id="tree-left" alt="" />
<img src="/Images/tree-right.png" id="tree-right" alt="" />
<img src="/Images/gate-left.png" id="gate-left" alt="" />
<img src="/Images/gate-right.png" id="gate-right" alt="" />
<img src="/Images/grass.png" id="grass" alt="" />
</section>
<section class="sec">
<h2>Paralax Scrolling Effects!</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga expedita
dolorum quod aut doloremque excepturi magni minus saepe? Pariatur
adipisci rerum ipsa, ex accusamus quam eveniet sed totam beatae qui!
Exercitationem similique asperiores eaque nisi voluptate cumque maxime
corrupti cupiditate. Magni aspernatur beatae itaque nihil velit magnam
eveniet aliquid fugiat ipsa, est impedit vero fuga. Consequatur fugiat
aut eum atque animi, ab perspiciatis iusto quis laborum sapiente
laudantium. Veritatis amet qui minus molestiae quos! Laudantium,
provident non quasi accusantium, culpa quam ipsam possimus vel quis ab
suscipit qui fuga eius fugiat? Sit, veritatis ullam? Reiciendis aperiam
pariatur iure repellat quidem molestias blanditiis magni modi, omnis
dicta quasi illum consequatur nobis nostrum deleniti eos enim error
perferendis dolore numquam! Vel et exercitationem sapiente natus!
Officiis, minus quasi consectetur quisquam at provident? <br /><br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga expedita
dolorum quod aut doloremque excepturi magni minus saepe? Pariatur
adipisci rerum ipsa, ex accusamus quam eveniet sed totam beatae qui!
Exercitationem similique asperiores eaque nisi voluptate cumque maxime
corrupti cupiditate. Magni aspernatur beatae itaque nihil velit magnam
eveniet aliquid fugiat ipsa, est impedit vero fuga. Consequatur fugiat
aut eum atque animi, ab perspiciatis iusto quis laborum sapiente
laudantium. Veritatis amet qui minus molestiae quos! Laudantium,
provident non quasi accusantium, culpa quam ipsam possimus vel quis ab
suscipit qui fuga eius fugiat? Sit, veritatis ullam? Reiciendis aperiam
pariatur iure repellat quidem molestias blanditiis magni modi, omnis
dicta quasi illum consequatur nobis nostrum deleniti eos enim error
perferendis dolore numquam! Vel et exercitationem sapiente natus!
Officiis, minus quasi consectetur quisquam at provident? <br /><br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga expedita
dolorum quod aut doloremque excepturi magni minus saepe? Pariatur
adipisci rerum ipsa, ex accusamus quam eveniet sed totam beatae qui!
Exercitationem similique asperiores eaque nisi voluptate cumque maxime
corrupti cupiditate. Magni aspernatur beatae itaque nihil velit magnam
eveniet aliquid fugiat ipsa, est impedit vero fuga. Consequatur fugiat
aut eum atque animi, ab perspiciatis iusto quis laborum sapiente
laudantium. Veritatis amet qui minus molestiae quos! Laudantium,
provident non quasi accusantium, culpa quam ipsam possimus vel quis ab
suscipit qui fuga eius fugiat? Sit, veritatis ullam? Reiciendis aperiam
pariatur iure repellat quidem molestias blanditiis magni modi, omnis
dicta quasi illum consequatur nobis nostrum deleniti eos enim error
perferendis dolore numquam! Vel et exercitationem sapiente natus!
Officiis, minus quasi consectetur quisquam at provident? <br /><br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga expedita
dolorum quod aut doloremque excepturi magni minus saepe? Pariatur
adipisci rerum ipsa, ex accusamus quam eveniet sed totam beatae qui!
Exercitationem similique asperiores eaque nisi voluptate cumque maxime
corrupti cupiditate. Magni aspernatur beatae itaque nihil velit magnam
eveniet aliquid fugiat ipsa, est impedit vero fuga. Consequatur fugiat
aut eum atque animi, ab perspiciatis iusto quis laborum sapiente
laudantium. Veritatis amet qui minus molestiae quos! Laudantium,
provident non quasi accusantium, culpa quam ipsam possimus vel quis ab
suscipit qui fuga eius fugiat? Sit, veritatis ullam? Reiciendis aperiam
pariatur iure repellat quidem molestias blanditiis magni modi, omnis
dicta quasi illum consequatur nobis nostrum deleniti eos enim error
perferendis dolore numquam! Vel et exercitationem sapiente natus!
Officiis, minus quasi consectetur quisquam at provident? <br /><br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga expedita
dolorum quod aut doloremque excepturi magni minus saepe? Pariatur
adipisci rerum ipsa, ex accusamus quam eveniet sed totam beatae qui!
Exercitationem similique asperiores eaque nisi voluptate cumque maxime
corrupti cupiditate. Magni aspernatur beatae itaque nihil velit magnam
eveniet aliquid fugiat ipsa, est impedit vero fuga. Consequatur fugiat
aut eum atque animi, ab perspiciatis iusto quis laborum sapiente
laudantium. Veritatis amet qui minus molestiae quos! Laudantium,
provident non quasi accusantium, culpa quam ipsam possimus vel quis ab
suscipit qui fuga eius fugiat? Sit, veritatis ullam? Reiciendis aperiam
pariatur iure repellat quidem molestias blanditiis magni modi, omnis
dicta quasi illum consequatur nobis nostrum deleniti eos enim error
perferendis dolore numquam! Vel et exercitationem sapiente natus!
Officiis, minus quasi consectetur quisquam at provident? <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 {
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 {
font-size: 2em;
color: #fff;
user-select: none;
}
.navigation a {
position: relative;
font-size: 1.1em;
color: #fff;
font-weight: 600;
text-decoration: none;
margin-left: 20px;
padding: 6px 15px;
}
.navigation a:hover,
.navigation a.active {
color: #333;
}
.navigation a span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
border-radius: 30px;
z-index: -1;
transform: scale(0);
opacity: 0;
transition: 0.5s;
}
.navigation a:hover span,
.navigation a.active span {
transform: scale(1);
opacity: 1;
}
.parallax {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: url("/Images/background.jpeg") no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
#text {
position: absolute;
font-size: 5em;
color: #841414;
text-shadow: 2px 4px 5px #f9f9f9;
}
.parallax img {
position: absolute;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
}
.parallax img#gate-left {
position: fixed;
transform: translateX(-282px);
}
.parallax img#gate-right {
position: fixed;
transform: translateX(305px);
}
.sec {
position: relative;
background: rgb(81, 11, 11);
padding: 30px 100px;
}
.sec h2 {
font-size: 3em;
color: #fff;
margin: 10px;
}
.sec p {
font-size: 1em;
color: #fff;
font-weight: 300;
text-align: justify;
}
Script.Js
let text = document.getElementById("text");
let treeLeft = document.getElementById("tree-left");
let treeRight = document.getElementById("tree-right");
let gateLeft = document.getElementById("gate-left");
let gateRight = document.getElementById("gate-right");
window.addEventListener("scroll", () => {
let value = window.scrollY;
text.style.marginTop = value * 2.5 + "px";
treeLeft.style.left = value * -1.5 + "px";
treeRight.style.left = value * 1.5 + "px";
gateLeft.style.left = value * 0.5 + "px";
gateRight.style.left = value * -0.5 + "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