Having fun with javascript once again :) Hope you'll like it!
A Pen by Mathieu Lavoie on CodePen.
Created
January 9, 2022 02:38
-
-
Save chrisle/9fe8f825f1f2fd8c7471a8b16bd3fd07 to your computer and use it in GitHub Desktop.
Scrambled letters
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
| #textContainer |
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
| 'use strict'; | |
| (function() { | |
| var written = false, | |
| translate = ['X','Y','Z'], | |
| indexFX = 0, | |
| firstMess = 0, | |
| App, | |
| interval; | |
| App = { | |
| messages: ['be the CHANGE that you wish to see in the WORLD.', | |
| 'LIVE as if you were to die tomorrow. LEARN as if you were to live forever.', | |
| 'you only live ONCE,but if you do it right, once is ENOUGH.', | |
| 'BE YOURSELF, everyone else is already taken.', | |
| 'LIFE is like riding a bicycle. to keep your balance, you MUST KEEP MOVING.' | |
| ], | |
| init: function() { | |
| this.cacheDom(); | |
| this.createMessage(App.messages[firstMess]); | |
| setTimeout(function() { | |
| App.replaceName(); | |
| },250); | |
| setTimeout(function() { | |
| App.messageInterval(); | |
| },3000) | |
| }, | |
| cacheDom: function() { | |
| this.$textCont = $('#textContainer'); | |
| this.$button = $('.Button'); | |
| this.$body = $('body'); | |
| }, | |
| createMessage: function(message) { | |
| var mLength = message.length, | |
| FX = translate[indexFX], | |
| fullMess = '', | |
| finalMess, | |
| bold; | |
| for (var i = 0; i < mLength; i++) { | |
| var rdm = Math.floor(Math.random() * 200) + 100, | |
| negOrPos = Math.round(Math.random()), | |
| letter = message.charAt(i), | |
| finalLetter = letter.toUpperCase(), | |
| output; | |
| if (!negOrPos) { | |
| rdm = '-'+rdm; | |
| } | |
| if (this.isUpperCase(letter)) { | |
| bold = 'bold'; | |
| } else { | |
| bold = ''; | |
| } | |
| if (letter === ' ') { | |
| output = '</span><span class="word">' | |
| } else { | |
| output = '<span class="letter '+bold+'" style="transform: translate'+FX+'('+rdm+'px);'+ | |
| '">'+finalLetter+'</span>' | |
| } | |
| fullMess += output; | |
| finalMess = '<span class="word">'+fullMess+'</span>'; | |
| } | |
| this.$textCont.html(finalMess); | |
| (indexFX<2)?indexFX++:indexFX=0; | |
| }, | |
| replaceName: function() { | |
| var $who = $('#textContainer').find('.letter'), | |
| each = $who.length; | |
| for (var i = 0; i < each; i++) { | |
| var rdm = (Math.random() * 1) + 1.5; | |
| TweenLite.to($who.eq(i), rdm, { ease: Power3.easeInOut, y:0, x:0, z:0, opacity: 1 }); | |
| } | |
| written = true; | |
| }, | |
| scrambleName: function() { | |
| var $who = $('#textContainer').find('.letter'), | |
| each = $who.length; | |
| for (var i = 0; i < each; i++) { | |
| var rdm = Math.floor(Math.random() * 200) +100, | |
| rdmTime = (Math.random() * 1) + 1.5, | |
| negOrPos = Math.round(Math.random()); | |
| if (!negOrPos) { | |
| rdm = '-'+rdm; | |
| } | |
| TweenLite.to($who.eq(i), rdmTime, { ease: Power3.easeInOut, opacity: 0 }); | |
| } | |
| written = false; | |
| }, | |
| messageInterval: function() { | |
| var which = firstMess + 1, | |
| arrayLength = this.messages.length-1; | |
| interval = setInterval(function() { | |
| if (written) { | |
| setTimeout(function(){ | |
| App.scrambleName(); | |
| },2500) | |
| } else { | |
| App.createMessage(App.messages[which]); | |
| (which < arrayLength)?which++:which=0; | |
| setTimeout(function() { | |
| App.replaceName(); | |
| },250); | |
| } | |
| },5000); | |
| }, | |
| isUpperCase: function(str) { | |
| var reg = /[^a-z|,|.|!|?|&|é|à|â|è|ê|ç|']/; | |
| return reg.test(str); | |
| } | |
| }; | |
| App.init(); | |
| })(); |
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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script> |
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
| @import url(https://fonts.googleapis.com/css?family=Raleway:800,500,300); | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background: #303030; | |
| perspective: 300px; | |
| position: relative; | |
| } | |
| #textContainer { | |
| font-family: 'Raleway'; | |
| font-size: 50px; | |
| font-weight: 300; | |
| color: #DADFE1; | |
| letter-spacing: 2px; | |
| position: relative; | |
| display: block; | |
| margin: 25px auto; | |
| top: 100px; | |
| width: 650px; | |
| text-align: center; | |
| transform-style: preserve-3d; | |
| .word { | |
| margin-right: 15px; | |
| display: inline-block; | |
| position: relative; | |
| &:last-child { | |
| margin-right: 0; | |
| } | |
| .letter { | |
| display: inline-block; | |
| position: relative; | |
| opacity: 0; | |
| min-width: 15px; | |
| transform-style: preserve-3d; | |
| //cursor: default; | |
| &.bold { | |
| font-weight: 700; | |
| transition: color 150ms linear; | |
| &:hover { | |
| color: #B23610; | |
| } | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment