wordsChanger.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wordsChanger Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css">
<style>
	body {
		background-color: #f1f1f1;
		text-align: center;
	}
	#word {
		text-transform: uppercase;
	}
	#word i {
		display: inline-block;
		font-style: normal;
		color: #98f9a0;
		white-space: nowrap;
		-webkit-transition: width 0.3s;
		-o-transition: width 0.3s;
		transition: width 0.3s;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/darkvovich/wordsChanger/master/wordsChanger.js"></script>
</head>
<body>
<h1>wordsChanger Demo</h1>
<h3 id="word" data-words="awesome, thinking, pseudopseudohypoparathyroidism, world, beautiful, interpretation">My words is <i>awesome</i></h3>
<script>
$('#word').wordsChanger();
</script>
</body>
</html>