Quick start



		<!doctype html>
		<head>
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css"/>
		</head>
		<body>
			<h1>Our software makes <span id="swappable-title"><span>developpers</span></span> happy</h1>
		</body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
		<script src="dist/slogan-roulette.min.js"></script>
		<script>
		// all options
		$('#swappable-title').sloganRoulette({
			autoplay: true,
			repeat: true,
			startDelay: 700,
			interval: 1000,
			outClass: "bounceOut",
			inClass: "bounceIn",
			slogans: ["designers", "doctors", "architects", "space monkeys"]
		});
		</script>

Animation test



		// fade in from top / fade out to bottom
		$('#swappable-title').sloganRoulette({
			outClass:"fadeOutDown",
			inClass:"fadeInDown"
		});

Animation test



		// bounce in / fade out to bottom
		$('#swappable-title').sloganRoulette({
			outClass:"fadeOutDown",
			inClass:"bounceIn"
		});

Animation test



		// bounce in / bounce out
		$('#swappable-title').sloganRoulette({
			outClass:"bounceOut",
			inClass:"bounceIn"
		});

Animation test



		// flip in / flip out
		$('#swappable-title').sloganRoulette({
			outClass:"flipOutX",
			inClass:"flipInX"
		});

Animation test



		// fade in up / zoom out up
		$('#swappable-title').sloganRoulette({
			outClass:"zoomOutUp",
			inClass:"fadeInUp"
		});

Animation test



		// bounce in / zoom out up
		$('#swappable-title').sloganRoulette({
			outClass:"zoomOutUp",
			inClass:"bounceIn"
		});