Last active
October 29, 2023 19:27
-
-
Save JacopoWolf/328f7224750d962146bd5b57788cdda3 to your computer and use it in GitHub Desktop.
Dark Souls-style YOU DIED popup text
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
| @font-face { | |
| font-family: "Optimus Princeps"; | |
| /* you'd have to download the font somewhere */ | |
| src: url('OptimusPrinceps.ttf') format('ttf'); | |
| } | |
| body{ | |
| text-align: center; | |
| } | |
| dialog.ds-popup{ | |
| /* box */ | |
| position: fixed; | |
| z-index: 99; | |
| top: 20%; | |
| width: 100%; | |
| /* text */ | |
| text-align: center; | |
| font-size: 2.5em; | |
| font-family: 'Optimus Princeps', 'Times New Roman', sans-serif; | |
| padding: 0; | |
| /* colors */ | |
| background-color: #000; | |
| color: red; | |
| /* effects */ | |
| border: none; | |
| box-shadow: | |
| 0 0 .5em 1em #000, | |
| 0 0 0 1000px rgba(50, 50, 50, 0.5) ; | |
| text-shadow: 0 0 1.2em orangered; | |
| /* animation */ | |
| animation-name: ds-popup-anim; | |
| animation-duration: 10s; | |
| animation-iteration-count: 1; | |
| } | |
| @keyframes ds-popup-anim { | |
| from { | |
| opacity: 0; | |
| font-size: 2em; | |
| text-shadow: 0 0 .6em orange; | |
| } | |
| 15%{ | |
| opacity: 1; | |
| text-shadow: 0 0 1em orangered; | |
| } | |
| 95%{ | |
| opacity: 1; | |
| } | |
| to { | |
| font-size: 2.5em; | |
| opacity: 0; | |
| } | |
| } |
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
| var dsPopupPlaying = false; | |
| function playDsPopup( id, time=10 ) { | |
| let dialog = document.getElementById(id); | |
| dialog.style.animationDuration = time+'s'; | |
| dialog.setAttribute('open',true); | |
| // allows only one animation playing at a time. | |
| let ddialog = function () { | |
| dialog.removeAttribute('open'); | |
| dialog.removeEventListener('animationend',ddialog,false); | |
| dsPopupPlaying = false; | |
| }; | |
| if (!dsPopupPlaying) { | |
| dialog.addEventListener('animationend',ddialog,false); | |
| dsPopupPlaying = true; | |
| } | |
| } |
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link rel="stylesheet" href="youdied.css" /> | |
| <script src="youdied.js"></script> | |
| </head> | |
| <body onload="playDsPopup('ds1', 7)"> | |
| <dialog class="ds-popup" id="ds1"> | |
| <h1><?php echo $_GET['msg'] ?? 'YOU DIED'?></h1> | |
| </dialog> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment