Levitation text

index.html

<!-- You can write hire ehat you want -->
<div class="text">Click  me!</div>

levitation-text.markdown

Levitation text

A Pen by Adefful on CodePen.

License.

script.js

var text = $('.text').text(),
    textArr = text.split('');

$('.text').html('');

$.each(textArr, function(i, v){
  $('.text').append('<div class="word black ">'+v+'</div>');
})

($(".word").click(function(){
  $(".word").each( (i, el) => setTimeout( (el) =>$(el).toggleClass("black"), 100 +50*i, el ) );
  $(".word").each( (i, el) => setTimeout( (el) =>$(el).toggleClass("black"), 700 +50*i, el ) );
}
));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.sass

body
  background: #8D0F24

.text
  top: 50%
  left: 0px
  width: 100%
  position: absolute
  text-align: center
  transform: translateY(-50%)
  font-family: 'Oswald', sans-serif
  line-height: 60px

.word
    color: #fff
    font-size: 70px
    font-weight: bold
    display: inline
    letter-spacing: 5px
    
    text-shadow: 0px 0px 0px #558B2F
    position: relative
    top: 0px
    left: 0px
    cursor: default
.black
  text-shadow: -8px 8px 0px #8D0F24-50
  
  top: -8px
  left: 8px

styles

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" />