-
Notifications
You must be signed in to change notification settings - Fork 7.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #535 from RahulRudra81/master
Some CSS
- Loading branch information
Showing
2 changed files
with
269 additions
and
290 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -52,279 +52,7 @@ | |
| <link rel="stylesheet" href="./css/terminal.css"> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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> | ||
|
|
@@ -368,6 +96,7 @@ | |
| <div class="heading">Contributors </div> | ||
|
|
||
| <div class="heart"></div> | ||
|
|
||
| <label class="theme-switch" for="checkbox"> | ||
|
|
||
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sun" | ||
|
|
@@ -621,6 +350,7 @@ | |
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <button id="backToTop" type="button" title="Back to Top"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" | ||
| y="0px" width="512px" height="512px" viewBox="0 0 284.929 284.929" | ||
|
|
@@ -656,23 +386,6 @@ | |
| } | ||
| } | ||
| 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> | ||
|
|
||
| <script src="./scripts/menu.js"></script> | ||
| <div class="container"> | ||
|
|
||
Oops, something went wrong.