Textillate News Scroller

by Shane Lambert

HTML

<script src="http://jschr.github.io/textillate/assets/jquery.lettering.js"></script>
<script src="http://jschr.github.io/textillate/jquery.textillate.js"></script>
<link rel="stylesheet" href="https://dl.dropbox.com/s/3bz0pcwc1mg23lp/myAnims.css">
<div class="news-scroller">
    <ul class="texts">
    </ul>
</div>
<button class="button">
Pause
</button>
<button class="button-2">
Resume
</button>

CSS

.paused {
  -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
    animation-play-state: paused;
}

JavaScript

newsArr = ['Some Title','Another Title','And Another Title'];
$.each(newsArr, function(i) {
	$('ul.texts').append('<li class="news-item-'+i+'">'+newsArr[i]+'</li>');
  });
var event = 1;
$('.news-scroller').textillate({
	 // enable looping
  loop: true,

  // sets the minimum display time for each text before it is replaced
  minDisplayTime: 4000,

  // sets the initial delay before starting the animation
  // (note that depending on the in effect you may need to manually apply
  // visibility: hidden to the element before running this plugin)
  initialDelay: 0,
  
  in: {
  	// set the effect name
    callback: function () {
      event = 2; console.log(event)
      },
    effect: 'flipInX',
    callback: function () {
      event = 0; console.log(event)
      }
	},
  out: {
    effect: 'flipOutX',
    callback: function () {
      event = 1; console.log(event)
      }
  },
});
/*-- FULL SET OF textillate METHODS

$('.tlt').textillate({
  // the default selector to use when detecting multiple texts to animate
  selector: '.texts',

  // enable looping
  loop: false,

  // sets the minimum display time for each text before it is replaced
  minDisplayTime: 2000,

  // sets the initial delay before starting the animation
  // (note that depending on the in effect you may need to manually apply
  // visibility: hidden to the element before running this plugin)
  initialDelay: 0,

  // set whether or not to automatically start animating
  autoStart: true,

  // custom set of 'in' effects. This effects whether or not the
  // character is shown/hidden before or after an animation
  inEffects: [],

  // custom set of 'out' effects
  outEffects: [ 'hinge' ],

  // in animation settings
  in: {
  	// set the effect name
    effect: 'fadeInLeftBig',

    // set the delay factor applied to each consecutive character
    delayScale: 1.5,

    // set the delay between each character
    delay: 50,

    // set to true to animate all the characters at the same time
    sync:...