Merge pull request #1799 from zero-to-mastery/chipoj-animatron

Chipoj animatron
zero-to-mastery · Oct 2, 2023 · 2cddfc6 · 2cddfc6
2 parents 7b54818 + 2d46909
commit 2cddfc6
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 0 deletions.
diff --git a/Art/ChipoJ/Elsa.png b/Art/ChipoJ/Elsa.png
diff --git a/Art/ChipoJ/index.html b/Art/ChipoJ/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <title>Falling Stars</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="night">
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+      <div class="star"></div>
+    </div>
+  </body>
+</html>
diff --git a/Art/ChipoJ/star_fall.gif b/Art/ChipoJ/star_fall.gif
diff --git a/Art/ChipoJ/style.css b/Art/ChipoJ/style.css
@@ -0,0 +1,151 @@
+body {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url('Elsa.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  background-color: #929090;
+  animation: change-color-anim 6s linear infinite;
+  overflow: hidden;
+}
+
+.night {
+  position: top; /* position: relative; */
+  width: 100%;
+  height: 100%;
+  transform: rotateZ(40deg);
+}
+
+.star {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  height: 5px;
+  background: linear-gradient(-45deg, hsl(225, 14%, 95%), rgba(0, 0, 255, 0));
+  border-radius: 999px;
+  filter: drop-shadow(0 0 6px hsl(220, 69%, 49%));
+  animation: tail 3s ease-in-out infinite, falling 3s ease-in-out infinite;
+}
+
+@keyframes tail {
+  0% {
+    width: 0;
+  }
+  30% {
+    width: 100px;
+  }
+  100% {
+    width: 0;
+  }
+}
+
+@keyframes falling {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(600px);
+  }
+}
+
+.star::before,
+.star::after {
+  content: '';
+  position: absolute;
+  top: calc(50% - 2px);
+  right: 0;
+  height: 4px;
+  background: linear-gradient(
+    -45deg,
+    rgba(0, 0, 255, 0),
+    #457df6,
+    rgba(0, 0, 255, 0)
+  );
+  border-radius: 100%;
+  transform: translateX(50%) rotateZ(45deg);
+  animation: shining 3s ease-in-out infinite;
+}
+
+@keyframes shining {
+  0% {
+    width: 0;
+  }
+  50% {
+    width: 60px;
+  }
+  100% {
+    width: 0;
+  }
+}
+
+.star::after {
+  transform: translateX(50%) rotateZ(-45deg);
+}
+
+.star:nth-child(1) {
+  top: calc(50% - 100px);
+  left: calc(50% - 250px);
+  animation-delay: 1s;
+}
+
+.star:nth-child(1)::before,
+.star:nth-child(1)::after {
+  animation-delay: 1s;
+}
+
+.star:nth-child(2) {
+  top: calc(50% - 50px);
+  left: calc(50% - 200px);
+  animation-delay: 1.2s;
+}
+
+.star:nth-child(2)::before,
+.star:nth-child(2)::after {
+  animation-delay: 1.2s;
+}
+
+.star:nth-child(3) {
+  top: calc(50% - 0px);
+  left: calc(50% - 150px);
+  animation-delay: 1.4s;
+}
+
+.star:nth-child(3)::before,
+.star:nth-child(3)::after {
+  animation-delay: 1.4s;
+}
+
+.star:nth-child(4) {
+  top: calc(50% - -50px);
+  left: calc(50% - 200px);
+  animation-delay: 1.6s;
+}
+
+.star:nth-child(4)::before,
+.star:nth-child(4)::after {
+  animation-delay: 1.6s;
+}
+
+.star:nth-child(5) {
+  top: calc(50% - -100px);
+  left: calc(50% - 250px);
+  animation-delay: 1.8s;
+}
+
+.star:nth-child(5)::before,
+.star:nth-child(5)::after {
+  animation-delay: 1.8s;
+}
+
+@keyframes change-color-anim {
+  0%,
+  100% {
+    background-color: #929090;
+  }
+  50% {
+    background-color: #000000;
+  }
+}
diff --git a/include.js b/include.js
@@ -33,6 +33,13 @@ let cards = [
     imageLink: "./Art/Mr.A'sAnimation/Animation.gif",
     author: 'Mr. AnkitR',
     githubLink: 'https://github.com/MrARawal'
+  },
+  {
+    artName: 'Falling stars',
+    pageLink: './Art/ChipoJ/index.html',
+    imageLink: './Art/ChipoJ/star_fall.gif',
+    author: 'ChipoJ',
+    githubLink: 'https://github.com/Chipoj'
   }
 ];