<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<p>I'll sing you a poem of a silly young king
Who played with the world at the end of a string,
But he only loved one single thing—
And that was just a peanut-butter sandwich.</p>
<p>His scepter and his royal gowns,
His regal throne and golden crowns
Were brown and sticky from the mounds
And drippings from each peanut-butter sandwich.</p>
<p>His subjects all were silly fools
For he had passed a royal rule
That all that they could learn in school
Was how to make a peanut-butter sandwich.</p>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Bubblegum+Sans);
span {
display: inline-block;
opacity: 0;
-webkit-transition: 2s;
transition: 2s;
}
body {
padding: 50px;
font-family: 'Bubblegum Sans', cursive;
font-size: 32px;
}
$(document).ready(function(){
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
$("p").each(function() {
var text = $(this).html();
var words = text.split(" ");
var spanSentence = "";
for (var i = 0; i < words.length; i++) {
spanSentence += "<span>" + words[i] + "</span> ";
}
$(this).html(spanSentence);
})
$("p span").each(function() {
$(this)
.css({
"transform": "translate(" + getRandomInt(-100, 100) + "px, " + getRandomInt(-100, 100) + "px)"
})
});
setTimeout(function() {
$("p:nth-child(1) span").css({
"transform": "translate(0, 0)",
"opacity": 1
});
}, 50);
setTimeout(function() {
$("p:nth-child(2) span").css({
"transform": "translate(0, 0)",
"opacity": 1
});
}, 3050);
setTimeout(function() {
$("p:nth-child(3) span").css({
"transform": "translate(0, 0)",
"opacity": 1
});
}, 6050);
});
