Added a new project 'Moon-Light Parallax Effect'

pulkit-30 · Sep 1, 2021 · c27e0a4 · c27e0a4
1 parent adedecc
commit c27e0a4
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 0 deletions.
diff --git a/Moon light/assets/bg.jpg b/Moon light/assets/bg.jpg
diff --git a/Moon light/assets/imageSize.txt b/Moon light/assets/imageSize.txt
@@ -0,0 +1 @@
+some image size is too heavy so you can reduce image size according to your need using photoshop or any online image optimizer website.
diff --git a/Moon light/assets/moon.png b/Moon light/assets/moon.png
diff --git a/Moon light/assets/mountain.png b/Moon light/assets/mountain.png
diff --git a/Moon light/assets/road.png b/Moon light/assets/road.png
diff --git a/Moon light/index.html b/Moon light/index.html
@@ -0,0 +1,31 @@
+<!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" />
+    <link rel="stylesheet" href="parallax.css" />
+    <title>Document</title>
+  </head>
+  <body>
+    <section class="section">
+      <img src="./assets/bg.jpg" id="bg" alt="" /><img
+        src="./assets/moon.png"
+        id="moon"
+        alt=""
+      /><img src="./assets/mountain.png" id="mountain" alt="" />
+      <img src="./assets/road.png" alt="" id="road" />
+      <h2 id="text">Moon Light</h2>
+    </section>
+    <section>
+      <h1>This effect is called Parallax Scrolling Effect</h1>
+    </section>
+    <footer>
+      <div>
+        Credit : <a href="https://github.com/iamtushar11">Tushar Gupta</a>
+      </div>
+      <div>Date: 1/09/2021</div>
+    </footer>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/Moon light/index.js b/Moon light/index.js
@@ -0,0 +1,15 @@
+let bg = document.getElementById("bg");
+let moon = document.getElementById("moon");
+let mountain = document.getElementById("mountain");
+let road = document.getElementById("road");
+let text = document.getElementById("text");
+
+window.addEventListener("scroll", function () {
+  var value = window.scrollY;
+
+  bg.style.top = value * 0.5 + "px";
+  moon.style.left = -value * 0.5 + "px";
+  mountain.style.top = -value * 0.15 + "px";
+  road.style.top = value * 0.15 + "px";
+  text.style.left = -value * 1 + "px";
+});
diff --git a/Moon light/parallax.css b/Moon light/parallax.css
@@ -0,0 +1,79 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "Poppins", sans-serif;
+}
+body {
+  background: #0a2a43;
+  min-height: 1500px;
+}
+::-webkit-scrollbar {
+  scroll-margin: 0;
+}
+.section {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.section::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100px;
+  background: linear-gradient(to top, #0a2a43, transparent);
+  z-index: 10000;
+}
+.section::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+  background: #0a2a43;
+  z-index: 10000;
+  mix-blend-mode: color;
+}
+
+.section img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+#text {
+  position: relative;
+  color: #fff;
+  font-size: 10em;
+  z-index: 1;
+}
+
+#road {
+  z-index: 2;
+}
+h1 {
+  position: relative;
+  top: 300px;
+  text-align: center;
+  font-size: 50px;
+  color: white;
+}
+footer {
+  position: absolute;
+  bottom: 30px;
+  left: 0;
+  color: white;
+  font-size: 15px;
+  z-index: 10000;
+}
diff --git a/Moon light/pro.png b/Moon light/pro.png
diff --git a/Moon light/readme.md b/Moon light/readme.md
@@ -0,0 +1,3 @@
+# Moon-Light Parallax
+
+<img src="./pro.png"/>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		some image size is too heavy so you can reduce image size according to your need using photoshop or any online image optimizer website.