Animated Text

HTML

<div class="container">
  <select>
    <option value="0.05">0.05</option>
    <option value="0.1">0.1</option>
    <option value="0.2">0.2</option>
    <option value="0.3">0.3</option>
    <option value="0.5">0.5</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <div class="fade-container">
  <span class="fade">animation is the process of creating the illusion of motion and shape change by means of the rapid display of a sequence of static images that minimally differ from each other the illusion as in motion pictures in general is thought to rely on the phi phenomenon animators are artists who <unk> in the creation of animation.</unk></span>
  </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Montserrat|Lato:100);
body{
  font-family: 'Montserrat';
  background: lightseagreen;
}

.container{
  text-align: center;
  width: 100%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fade-container{
  background: #e7fbfa;
  width: 100%;
  height: 100%;
  position: relative;
  transition: background 0.15s ease-in-out;
}

.fade-container:hover{
  cursor: pointer;
}

.fade{
  top: 100%;
  left: 50%;
  transform: translate(-50%,-50%);  
  position: absolute;
  /*text-transform: uppercase;*/
  font-size: 2.5em;
  color: lightseagreen;
  text-align: left;
  width: 80%;
  animation: slide 160s;
}

.slide{
  -webkit-animation: slide 40000s;
  animation: slide 40000s;
}


@keyframes slide {
  0% {
    margin-top: 0%;
  }
  
  100% {
    margin-top: -200%;
  }
}

.bounceInDown{
  opacity: 0;
  -webkit-animation: bounceInDown 1s;
  animation: bounceInDown 1s;
  -webkit-animation-fill-mode: forwards;
}

.fadeInDown{
  opacity: 0;
  -webkit-animation: fadeInDown 10s;
  animation: fadeInDown 10s;
  -webkit-animation-fill-mode: forwards;
}

.fadeOutUp{
  opacity: 0;
  -webkit-animation: fadeOutUp 5s;
  animation: fadeOutUp 5s;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform:...

JavaScript

// Animate function
function stepAnimateText(element, animation, delay) {

  var text = $(element).text();
  var curr = '';

  for (var i = 0; i < text.length; i++) {
    var character = text.charAt(i);
    $(element).html(curr + '<span class="' + animation + '" style="-webkit-animation-delay: ' + i * delay + 's; animation-delay: ' + i * delay + 's">' + character + "</span>");
    curr = $(element).html();
  }
}

function stepAnimateSlide(element, animation, duration) {

  var text = $(element).text();
  var curr = '';

  for (var i = 0; i < text.length; i++) {
    var character = text.charAt(i);
    $(element).html(curr + '<span class="' + animation + '" style="-webkit-animation-duration: ' + i * duration + 's; animation-duration: ' + i * duration + 's">' + character + "</span>");
    curr = $(element).html();
  }
}

function RT() {
  const wordsPerMinute = 200; // Average case.
  let text = document.getElementsByClassName("fade")[0].innerText;
  console.log(text);  
  
  let textLength = text.split(" ").length; // Split by words
  console.log(textLength);
  if(textLength > 0){
  	console.log(Math.ceil(textLength / wordsPerMinute));
    return textLength;
  }	
}

var slide_delay = RT();

// Init on load
var delay = 0.1
stepAnimateText('.fade', 'fadeInDown', delay);
stepAnimateText('.fade', 'fadeOutUp', delay);
//stepAnimateSlide('.fade', 'slide', slide_delay);

$('.fade-container').click(function() {
  var delay = $('select').val();
  stepAnimateText('.fade', 'fadeInDown', delay);
  stepAnimateText('.fade', 'fadeOutUp', delay)
  //stepAnimateText('.fade', 'slide', RT());
  return false;
});