Merge pull request #335 from Palaksharma23/newcss

Added a creative animation effect to word contributors as per #3
fineanmol · Oct 2, 2021 · 0588012 · 0588012
2 parents 51c1c16 + c7dd007
commit 0588012
Showing 1 changed file with 277 additions and 4 deletions.
diff --git a/Contributors.html b/Contributors.html
@@ -52,6 +52,250 @@
   <link rel="stylesheet" href="./css/terminal.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
   <title>Hacktoberfest 2021 - Contributors</title>
+  <style>
+    .word {
+	font-family: 'Anton', sans-serif;
+	perspective: 1000px; 
+}
+
+.word span {
+	cursor: pointer;
+	display: inline-block;
+	font-size: 8vw;
+	user-select: none;
+	line-height: .8;
+}
+
+.word span:nth-child(1).active {
+	animation: balance 1.5s ease-out;
+	transform-origin: bottom left;
+}
+
+@keyframes balance {
+	0%, 100% {
+		transform: rotate(0deg);
+	}
+
+	30%, 60% {
+		transform: rotate(-45deg);
+	}
+}
+
+.word span:nth-child(2).active {
+	animation: shrinkjump 1s ease-in-out;
+	transform-origin: bottom center;
+}
+
+@keyframes shrinkjump {
+	10%, 35% {
+		transform: scale(2, .2) translate(0, 0);
+	}
+
+	45%, 50% {
+		transform: scale(1) translate(0, -150px);
+	}
+
+	80% {
+		transform: scale(1) translate(0, 0);
+	}
+}
+
+.word span:nth-child(3).active {
+	animation: falling 2s ease-out;
+	transform-origin: bottom center;
+}
+
+@keyframes falling {
+	12% {
+		transform: rotateX(240deg);
+	}
+
+	24% {
+		transform: rotateX(150deg);
+	}
+
+	36% {
+		transform: rotateX(200deg);
+	}
+
+	48% {
+		transform: rotateX(175deg);
+	}
+
+	60%, 85% {
+		transform: rotateX(180deg);
+	}
+
+	100% {
+		transform: rotateX(0deg);
+	}
+}
+
+.word span:nth-child(4).active {
+	animation: rotate 1s ease-out;
+}
+
+@keyframes rotate {
+	20%, 80% {
+		transform: rotateY(180deg);
+	}
+
+	100% {
+		transform: rotateY(360deg);
+	}
+}
+
+.word span:nth-child(5).active {
+	animation: toplong 1.5s linear;
+}
+
+@keyframes toplong {
+	10%, 40% {
+		transform: translateY(-48vh) scaleY(1);
+	}
+
+	90% {
+		transform: translateY(-48vh) scaleY(4);
+	}
+}
+
+
+.word span:nth-child(6).active {
+	animation: balance 1.5s ease-out;
+	transform-origin: bottom left;
+}
+
+@keyframes balance {
+	0%, 100% {
+		transform: rotate(0deg);
+	}
+
+	30%, 60% {
+		transform: rotate(-45deg);
+	}
+}
+
+.word span:nth-child(7).active {
+	animation: shrinkjump 1s ease-in-out;
+	transform-origin: bottom center;
+}
+
+@keyframes shrinkjump {
+	10%, 35% {
+		transform: scale(2, .2) translate(0, 0);
+	}
+
+	45%, 50% {
+		transform: scale(1) translate(0, -150px);
+	}
+
+	80% {
+		transform: scale(1) translate(0, 0);
+	}
+}
+
+.word span:nth-child(8).active {
+	animation: falling 2s ease-out;
+	transform-origin: bottom center;
+}
+
+@keyframes falling {
+	12% {
+		transform: rotateX(240deg);
+	}
+
+	24% {
+		transform: rotateX(150deg);
+	}
+
+	36% {
+		transform: rotateX(200deg);
+	}
+
+	48% {
+		transform: rotateX(175deg);
+	}
+
+	60%, 85% {
+		transform: rotateX(180deg);
+	}
+
+	100% {
+		transform: rotateX(0deg);
+	}
+}
+
+.word span:nth-child(9).active {
+	animation: rotate 1s ease-out;
+}
+
+@keyframes rotate {
+	20%, 80% {
+		transform: rotateY(180deg);
+	}
+
+	100% {
+		transform: rotateY(360deg);
+	}
+}
+
+.word span:nth-child(10).active {
+	animation: toplong 1.5s linear;
+}
+
+@keyframes toplong {
+	10%, 40% {
+		transform: translateY(-48vh) scaleY(1);
+	}
+
+	90% {
+		transform: translateY(-48vh) scaleY(4);
+	}
+}
+.word span:nth-child(11).active {
+	animation: balance 1.5s ease-out;
+	transform-origin: bottom left;
+}
+
+@keyframes balance {
+	0%, 100% {
+		transform: rotate(0deg);
+	}
+
+	30%, 60% {
+		transform: rotate(-45deg);
+	}
+}
+
+.word span:nth-child(12).active {
+	animation: shrinkjump 1s ease-in-out;
+	transform-origin: bottom center;
+}
+
+@keyframes shrinkjump {
+	10%, 35% {
+		transform: scale(2, .2) translate(0, 0);
+	}
+
+	45%, 50% {
+		transform: scale(1) translate(0, -150px);
+	}
+
+	80% {
+		transform: scale(1) translate(0, 0);
+	}
+}
+@media (max-width:1024px)
+{
+  .word span {
+	cursor: pointer;
+	display: inline-block;
+	font-size: 5vw;
+	user-select: none;
+	line-height: .8;
+}
+}
+  </style>
 </head>
 
 <body>
@@ -95,10 +339,22 @@
 
       <div class="heart"></div>
       <div class="wrapper">
-        <div>
-          <h1 class="animated rubberBand delay-4s">Contributors</h1>
-          <p class="animated rubberBand delay-4s">Add yourself to the list if you contribute.</p>
-        </div>
+        <div class="word">
+        <span>C</span>
+        <span>O</span>
+        <span>N</span>
+        <span>T</span>
+        <span>R</span>
+        <span>I</span>
+        <span>B</span>
+        <span>U</span>
+        <span>T</span>
+        <span>O</span>
+        <span>R</span>
+        <span>S</span>
+      </div></div>
+      <hr style="width:80%">
+        <p class="animated rubberBand delay-4s">Add yourself to the list if you contribute.</p>
         <label class="theme-switch" for="checkbox">
           <input type="checkbox" id="checkbox" />
           <div class="slider round"></div>
@@ -268,6 +524,8 @@ <h1 class="animated rubberBand delay-4s">Contributors</h1>
         <a class="box-item" href="https://github.com/nvnsaharan"><span>Naveen Saharan</span></a>
         <a class="box-item" href="https://github.com/FarhanFDjabari"><span>Farhan Fadhilah Djabari</span></a>
         <a class="box-item" href="https://github.com/Asi-21"><span>Ashish Nain</span></a>
+        <a class="box-item" href="https://github.com/Palaksharma23"><span>Palak Sharma</span></a>
+
 
 
         <!-- Please maintain the alignment... -->
@@ -316,6 +574,21 @@ <h1 class="animated rubberBand delay-4s">Contributors</h1>
       }
     }
     toggleSwitch.addEventListener('change', switchTheme);
+    const spans = document.querySelectorAll('.word span');
+    spans.forEach((span, idx) => {
+	span.addEventListener('click', (e) => {
+		e.target.classList.add('active');
+	});
+	span.addEventListener('animationend', (e) => {
+		e.target.classList.remove('active');
+	});
+
+	// Initial animation
+	setTimeout(() => {
+		span.classList.add('active');
+	}, 750 * (idx+1))
+});
+
   </script>
   <script src="/scripts/scroll.js"></script>