Skip to content

Commit 2208574

Browse files
tirtharajsinhatirtharajsinha
authored
Add files via upload
1 parent 22a2660 commit 2208574

File tree

9 files changed

+178
-0
lines changed

9 files changed

+178
-0
lines changed

‎parallax.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<html>
2+
<head>
3+
<title> parallax effect</title>
4+
<meta charset="utf-8">
5+
6+
<style>
7+
.container{
8+
max-width: 960px;
9+
margin:0 auto;
10+
background: #f9f9f9:
11+
font-size:24px;
12+
padding:25px;
13+
14+
}
15+
.parallax {
16+
background:url("static/bg.jpg") no-repeat center;
17+
background-size:cover;
18+
background-attachment: fixed;
19+
height:500px;
20+
}
21+
.parallax1 {
22+
background:url("static/delta.jpg") no-repeat center;
23+
background-size:cover;
24+
background-attachment: fixed;
25+
height:500px;
26+
}
27+
28+
</style>
29+
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
30+
<script src="parallax.js" type="text/javascript"></script> -->
31+
</head>
32+
<body>
33+
34+
<div class="container">
35+
<p>Nature is very importance of humans have needed to survive and thrive, was provided by the natural world around us : food, water,
36+
medicine, materials, for shelter, and even natural cycles such us climate and nutrients . Nature is our sole supplier. Some animals give us food</p>
37+
<p>Nature is very importance of humans have needed to survive and thrive, was provided by the natural world around us :
38+
food, water, medicine, materials, for shelter, and even natural cycles such us climate and nutrients . Nature is our sole supplier. Some animals give us food</p>
39+
40+
<p>Nature is very importance of humans have needed to survive and thrive, was provided by the natural world around us :
41+
food, water, medicine, materials, for shelter, and even natural cycles such us climate and nutrients . Nature is our sole supplier. Some animals give us food</p>
42+
<div class="parallax1">
43+
44+
</div>
45+
<p>Nature is very importance of humans have needed to survive and thrive, was provided by the natural world around us :
46+
food, water, medicine, materials, for shelter, and even natural cycles such us climate and nutrients . Nature is our sole supplier. Some animals give us food</p>
47+
<p>Nature is very importance of humans have needed to survive and thrive, was provided by the natural world around us :
48+
food, water, medicine, materials, for shelter, and even natural cycles such us climate and nutrients . Nature is our sole supplier. Some animals give us food</p>
49+
<p>Nature is very importance of humans have needed to survive and thrive, was provided by the natural world around us :
50+
food, water, medicine, materials, for shelter, and even natural cycles such us climate and nutrients . Nature is our sole supplier. Some animals give us food</p>
51+
<p>Nature is very importance of humans have needed to survive and thrive, was provided by the natural world around us :
52+
food, water, medicine, materials, for shelter, and even natural cycles such us climate and nutrients . Nature is our sole supplier. Some animals give us food</p>
53+
<p>Nature is very importance of humans have needed to survive and thrive, was provided by the natural world around us :
54+
food, water, medicine, materials, for shelter, and even natural cycles such us climate and nutrients . Nature is our sole supplier. Some animals give us food</p>
55+
56+
<div class="parallax" >
57+
58+
</div>
59+
60+
</div>
61+
62+
63+
64+
</body>
65+
</html>

‎parallax.js‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/bg.jpg‎

478 KB
Loading

‎static/delta.jpg‎

3.54 MB
Loading

‎static/moon.png‎

163 KB
Loading

‎static/mountain.png‎

1.25 MB
Loading

‎static/road.png‎

1.63 MB
Loading

‎style.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
*{
2+
margin:0;
3+
padding:0;
4+
font-family: 'poppins',sans-serif;
5+
}
6+
body{
7+
background: #0a2a43;
8+
min-height: 1500px;
9+
}
10+
section{
11+
position: relative;
12+
width: 100%;
13+
height: 100vh;
14+
overflow: hidden;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
}
19+
section:before{
20+
content:'';
21+
position: absolute;
22+
bottom:0;
23+
width: 100%;
24+
height: 100%;
25+
background:linear-gradient(to top,#0a2a43 0%, transparent 32%);
26+
z-index:10000;
27+
28+
}
29+
section:after{
30+
content:'';
31+
position: absolute;
32+
bottom:0;
33+
width: 100%;
34+
height: 100%;
35+
background: #0a2a43;
36+
z-index:10000;
37+
mix-blend-mode: color;
38+
39+
}
40+
41+
section img{
42+
position: absolute;
43+
top:0;
44+
left:0;
45+
width: 100%;
46+
height: 100%;
47+
object-fit: cover;
48+
pointer-events: none;
49+
50+
}
51+
#text{
52+
position: relative;
53+
color:white;
54+
font-size: 5em;
55+
z-index: 1;
56+
}
57+
#road{
58+
z-index: 2;
59+
}
60+
@media (max-width: 360px) {
61+
#text{
62+
font-size: 3.8em;
63+
margin-bottom: 200px;
64+
}
65+
section{
66+
height: 80vh;
67+
}
68+
img #moon{
69+
height: auto;
70+
width: 400px;
71+
}
72+
}

‎vanila-scrole-parallax.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>vanila.js background scrolling effect</title>
6+
<link rel="stylesheet" href="style.css">
7+
8+
</head>
9+
<body>
10+
<section>
11+
<img src="static/bg.jpg" alt="bg" id="bg">
12+
<img src="static/moon.png" alt="moon" id="moon">
13+
<img src="static/mountain.png" alt="mountain" id="mountain">
14+
<img src="static/road.png" alt="road" id="road">
15+
<h2 id="text"><u>Moon Light Heaven</u></h2>
16+
</section>
17+
<script type="text/javascript">
18+
let bg=document.getElementById("bg");
19+
let moon=document.getElementById("moon");
20+
let mountain=document.getElementById("mountain");
21+
let road=document.getElementById("road");
22+
let text=document.getElementById("text");
23+
24+
25+
window.addEventListener('scroll',function(){
26+
var value=window.scrollY;
27+
bg.style.top=value*0.5+"px";
28+
moon.style.left= -value*1+"px";
29+
mountain.style.top=-value*0.15+"px";
30+
road.style.top=value*0.15+"px";
31+
text.style.top=value*1+"px";
32+
})
33+
</script>
34+
</body>
35+
</html>

0 commit comments

Comments
 (0)