Skip to content

Commit 8494760

Browse files
Add files via upload
1 parent 055fe6d commit 8494760

File tree

7 files changed

+36
-1
lines changed

7 files changed

+36
-1
lines changed

static/bg1.png

4.21 MB
Loading

static/moon1.png

159 KB
Loading

static/moon2.png

219 KB
Loading

static/mountain1.png

1.11 MB
Loading

static/road1.png

220 KB
Loading

style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ section:before{
2222
bottom:0;
2323
width: 100%;
2424
height: 100%;
25-
background:linear-gradient(to top,#0a2a43 0%, transparent 32%);
25+
background:linear-gradient(to top,#0a2a43 10%, transparent 20%);
2626
z-index:10000;
2727

2828
}

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/bg1.png" alt="bg" id="bg">
12+
<img src="static/moon2.png" alt="moon" id="moon">
13+
<img src="static/mountain1.png" alt="mountain" id="mountain">
14+
<img src="static/road1.png" alt="road" id="road">
15+
<h2 id="text"><u>Tirtharaj sinha</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.1+"px";
31+
text.style.top=value*1+"px";
32+
})
33+
</script>
34+
</body>
35+
</html>

0 commit comments

Comments
 (0)