Scrambled letters

index.pug

#textContainer

scrambled-letters.markdown

Scrambled letters

Having fun with javascript once again :) Hope you'll like it!

A Pen by Mathieu Lavoie on CodePen.

License.

script.js

'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();
})();

scripts

<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>

style.scss

@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;
        }
      }
    }
  }
}