Merge pull request #62 from sinc0115/parallax-waves

Adds Parallax Sunset #hacktoberfest
pulkit-30 · Oct 12, 2021 · 55e5a18 · 55e5a18
2 parents 8d6122f + 73288d3
commit 55e5a18
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 0 deletions.
diff --git a/Parallax Sunset/Sunset-Screenshot.png b/Parallax Sunset/Sunset-Screenshot.png
diff --git a/Parallax Sunset/images/sun.svg b/Parallax Sunset/images/sun.svg
diff --git a/Parallax Sunset/images/wave.svg b/Parallax Sunset/images/wave.svg
diff --git a/Parallax Sunset/parallax-sunset.html b/Parallax Sunset/parallax-sunset.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta name="description" content="Scrollable sunset with animated waves.">
+        <meta name="keywords" content="css,parallax,sunset,waves">
+        <meta name="author" content="sinc0115">
+        <title>Parallax Waves</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+
+    <body>
+
+        <!-- CONTAINER -->
+        <div id="container">
+
+            <!-- SUN -->
+            <div id="parallax">
+                <div class="sun"></div>
+            </div>
+            <!-- SUN ENDS -->
+
+            <!-- WAVES -->
+            <div>
+                <img src="images/wave.svg" alt="" class="wave one">
+            </div>
+            <div>
+                <img src="images/wave.svg" alt="" class="wave two">
+            </div>
+            <div>
+                <img src="images/wave.svg" alt="" class="wave three">
+            </div>
+            <!-- WAVES END -->
+
+        </div>
+        <!-- CONTAINER ENDS -->
+
+    </body>
+</html>
diff --git a/Parallax Sunset/readme.md b/Parallax Sunset/readme.md
@@ -0,0 +1,3 @@
+# Parallax Sunset
+
+Scrollable sunset with animated waves created by sinc0115
diff --git a/Parallax Sunset/style.css b/Parallax Sunset/style.css
@@ -0,0 +1,68 @@
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    margin: 0;
+	padding: 0;
+}
+
+#container {
+    background-image: linear-gradient(#ff9e61, #ff7620);
+    width: 100vw;
+    height: 100vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    perspective: 1px;
+    perspective-origin: center;
+}
+
+#parallax {
+    position: relative;
+    height: 100vh;
+    transform-style: preserve-3d;
+    transform: scale(0.9);
+    transition: transform 250ms ease-out;
+}
+
+.sun {
+    background-image: url(images/sun.svg);
+    width: 100vw;
+    height: 100%;
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+img.wave {
+    width: 100vw;
+    display: block;
+    position: absolute;
+    top: 40vh;
+}
+
+.wave.one {
+    transform: translateY(1vh);
+    animation: animateZ 5s infinite ease-in-out;
+}
+.wave.two {
+    transform: translateY(1vh);
+    animation: animateZ 7s infinite ease-in-out;
+}
+.wave.three {
+    transform: translateY(1vh);
+    animation: animateZ 4s infinite ease-in-out;
+}
+
+@keyframes animateZ {
+    0% {
+        transform: translateY(1vh);
+    }
+    50% {
+        transform: translateY(10vh);
+    }
+    100% {
+        transform: translateY(1vh);
+    }
+}
diff --git a/README.md b/README.md
@@ -54,6 +54,7 @@
 | Card Flip on Hold             | https://gabrielgomeso.github.io/card_flip.html                          |
 | Credit Cards                  | https://iqbalutomo.github.io/credit-cards/                              |
 | Loader Glowing                | https://jonathanallisson.github.io/loader/                              |
+| Parallax Sunset               | https://sinc0115.github.io/parallax-sunset/                             |
 | Captain America Animation     | https://jonathanallisson.github.io/Captain/                             |
 
 ---
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Parallax Sunset

		Scrollable sunset with animated waves created by sinc0115