Textillate Base

by Zakaria Acharki

HTML

<link rel="stylesheet" href="http://jschr.github.io/textillate/assets/animate.css">
<script src="http://jschr.github.io/textillate/assets/jquery.lettering.js"></script>
<textarea id="manifestoWriter" class="chatinput form-control content" placeholder="We want courage, audacity and hope without the fascism" rows="11" style="resize: none; background-color:#f7f7f7; border: 0cm; border-radius: 0cm; " maxlength="800" name="mas"></textarea>


<h1 class="tlt1 mas" id="toChange" style="vertical-align: middle; color: white; word-wrap: break-word;">We want courage, audacity and hope without the fascism</h1>
<p>&nbsp;</p>

<h1 class="tlt1 mas" id="toChange">We want courage, audacity and hope without the fascism</h1>

JavaScript

$('.content:not(.focus)').keyup(function() {


  var value = $(this).val();
  var contentAttr = $(this).attr('name');

  $('.' + contentAttr + '').html(value.replace(/\r?\n/g, '<br/>'));

})


//text animations
$('.tlt').textillate({ in: {
    effect: 'fadeIn',
    shuffle: true
  },
  out: {
    effect: 'fadeOut',
    shuffle: true
  },
  loop: true,
  minDisplayTime: 5000,
});