Created
October 9, 2017 23:38
-
-
Save Meshiest/2e3ea78b3be4226f10e68b18c0731fd8 to your computer and use it in GitHub Desktop.
I thought it would look cool
This file contains hidden or 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> | |
| <title>Stevens Cyber Defense Society</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300|Work+Sans:300" rel="stylesheet"> | |
| <style type="text/css"> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .title { | |
| color: #5c5; | |
| font-family: 'Source Code Pro', monospace; | |
| font-size: 80px; | |
| text-shadow: 0 0 10px #0a0; | |
| } | |
| body { | |
| background-color: #eee; | |
| min-height: 100vh; | |
| } | |
| .container { | |
| display: flex; | |
| flex-direction: row; | |
| min-height: 100vh; | |
| } | |
| @media screen and (max-width: 800px) { | |
| .title { | |
| font-size: 50px; | |
| } | |
| .container { | |
| flex-direction: column; | |
| } | |
| } | |
| .half { | |
| flex: 1; | |
| padding: 50px; | |
| } | |
| .title-half { | |
| align-items: center; | |
| background-color: #000; | |
| display: flex; | |
| } | |
| .content-half { | |
| font-family: 'Work Sans', sans-serif; | |
| } | |
| .centered { | |
| text-align: center; | |
| } | |
| p { | |
| line-height: 1.8; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="title-half half"> | |
| <h1 class="title"> | |
| <div class="title-line" message="Stevens"></div> | |
| <div class="title-line" message="Cyber"></div> | |
| <div class="title-line" message="Defense"></div> | |
| <div class="title-line" message="Society"></div> | |
| </h1> | |
| </div> | |
| <div class="content-half half"> | |
| <h1 class="centered">Welcome</h1> | |
| <p> | |
| I didn't actually expect to put any content here, I just thought the animation would be cool | |
| </p> | |
| </div> | |
| <div> | |
| <script type="text/javascript"> | |
| const CHARS = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!\"#$%\'()*+,-./:;=?@[\\]^_`{|}~"; | |
| // Gets a random element in array/string arr | |
| function sample(arr) { | |
| return arr[Math.floor(Math.random() * arr.length)]; | |
| } | |
| // Shuffle the non-correct characters of the elem's inner html | |
| function shuffleChars(elem, probability) { | |
| let message = elem.getAttribute('message'); | |
| elem.innerHTML = message.split('') | |
| .map((char, i) => { | |
| // one random was just not good enough | |
| if(char === elem.innerHTML[i] || Math.random() < probability && Math.random() < probability) | |
| return char; | |
| return sample(CHARS.replace(char, '')); | |
| }) | |
| .join(''); | |
| return elem.innerHTML == message; | |
| } | |
| let lines = document.querySelectorAll('.title-line'); | |
| let time = Date.now(); | |
| // Shuffle characters in selected lines until the words are resolved | |
| (function shuffleLoop(lines, probability) { | |
| if(probability >= 1) | |
| return; | |
| let delta = (Date.now() - time)/1000; | |
| time = Date.now(); | |
| lines.forEach(e => | |
| shuffleChars(e, probability)); | |
| requestAnimationFrame(() => | |
| shuffleLoop(lines, probability + Math.random() * delta)); | |
| })(lines, 0); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment