diff --git a/Moon light/assets/bg.jpg b/Moon light/assets/bg.jpg new file mode 100644 index 0000000..23441a6 Binary files /dev/null and b/Moon light/assets/bg.jpg differ diff --git a/Moon light/assets/imageSize.txt b/Moon light/assets/imageSize.txt new file mode 100644 index 0000000..ff4cf19 --- /dev/null +++ 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. \ No newline at end of file diff --git a/Moon light/assets/moon.png b/Moon light/assets/moon.png new file mode 100644 index 0000000..81191ea Binary files /dev/null and b/Moon light/assets/moon.png differ diff --git a/Moon light/assets/mountain.png b/Moon light/assets/mountain.png new file mode 100644 index 0000000..777dc9f Binary files /dev/null and b/Moon light/assets/mountain.png differ diff --git a/Moon light/assets/road.png b/Moon light/assets/road.png new file mode 100644 index 0000000..41cb458 Binary files /dev/null and b/Moon light/assets/road.png differ diff --git a/Moon light/index.html b/Moon light/index.html new file mode 100644 index 0000000..8853246 --- /dev/null +++ b/Moon light/index.html @@ -0,0 +1,31 @@ + + + + + + + + Document + + +
+ + +

Moon Light

+
+
+

This effect is called Parallax Scrolling Effect

+
+ + + + diff --git a/Moon light/index.js b/Moon light/index.js new file mode 100644 index 0000000..caac9c3 --- /dev/null +++ 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 new file mode 100644 index 0000000..fb2a4a5 --- /dev/null +++ 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 new file mode 100644 index 0000000..8553fda Binary files /dev/null and b/Moon light/pro.png differ diff --git a/Moon light/readme.md b/Moon light/readme.md new file mode 100644 index 0000000..cd4f8df --- /dev/null +++ b/Moon light/readme.md @@ -0,0 +1,3 @@ +# Moon-Light Parallax + +