Groovy text fade in script

groovy-text-fade-in-script.markdown

Groovy text fade in script

Just a quickie for y'all.

A Pen by Jamie Coulter on CodePen.

License.

index.haml

.container
  .intro Heres a quick script for y'all!
  .sub Use it to animate in boring text
  .dash -----------------------------------------------
  .desc Comes with 2 pre-built effects
  .fade Fade in some text
  .bounce Bounce in some text
  .dash2 -----------------------------------------------
  .usage textify(element,method,delay)

script.js

split = function (element) {
  words = $(element).text().split('');
  for (i in words) {
    words[i] = '<span>' + words[i] + '</span>';
  }
  text = words.join('');
  $(element).html(text);
};

textify = function(element,method,delay) {
  split(element);
  $(element + ' span').css('opacity','0')
  $(element + ' span').css('position','relative');
  in_speed = 10;
  count = 0;
  setTimeout(function(){
    count = 0;
    $(element + ' span').each(function () {
      if(method == 'fade'){
        $(this).delay(0 + in_speed * count).animate({ opacity: '1' }, 200);
      } else if(method == 'bounce'){
        $(this).delay(0 + in_speed * count).animate({ opacity: '1','top':'-4px'}, 220,'easeOutCubic');
        $(this).delay(0 + in_speed * count/4).animate({ opacity: '1','top':'0px'}, 220);
      }
      count++;
    });
  },delay);
};

/* Now textify! */

textify('.intro','fade',500);
textify('.sub','bounce',1500);
textify('.dash','fade',2500);
textify('.desc','fade',3500);
textify('.fade','fade',4500);
textify('.bounce','bounce',5500);
textify('.dash2','fade',6500);
textify('.usage','fade',7500);

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/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.scss

/* Base Fonts */

@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);

body{
  background:#4A6E8C;
  font-family:oswald;
  color:white;
  text-transform:uppercase;
  text-align:center;
  .container{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:0;
    right:0;
  }
  .intro{

    font-size:30px;
  }
  .sub{
    font-size: 26px;
    letter-spacing: 1.4px;
    margin-top: -4px;
    color: #94C9F5;
  }
  .desc{
    font-size: 27px;
    letter-spacing: 1.23px;
    margin-top: 4px;
    color: #FFCB00;
  }
  .fade{
    font-size: 53px;
    margin-top: -14px;
  }
  .bounce{
    font-size: 44.5px;
    margin-top: -18px;
    color: #F99323;
  }
  .dash2{
    margin-top:-10px;
  }
  .usage{
    font-size: 30px;
  }
}