script.js
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);
index.html
<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>
Words-Randomly-Flying-Into-Place.markdown
Words Randomly Flying Into Place
--------------------------------
| just | a | silly | demo |
|---------------|:------:|:-----:|---------:|
| demonstrating | tables | in | markdown |
Forked from [Chris Coyier](http://codepen.io/chriscoyier/)'s Pen [Words Randomly Flying Into Place](http://codepen.io/chriscoyier/pen/amDLr/).
A [Pen](http://codepen.io/anon/pen/Itdjz) by [Captain Anonymous](http://codepen.io/anon) on [CodePen](http://codepen.io/).
[License](http://codepen.io/anon/pen/Itdjz/license).
style.css
@import url(http://fonts.googleapis.com/css?family=Bubblegum+Sans);
span {
display: inline-block;
opacity: 0;
transition: 2s;
}
body {
padding: 50px;
font-family: 'Bubblegum Sans', cursive;
font-size: 32px;
}