Skip to content

Instantly share code, notes, and snippets.

@roachhd

roachhd/Words-Randomly-Flying-Into-Place.markdown

Forked from anonymous/Words-Randomly-Flying-Into-Place.markdown
Created November 8, 2014 14:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save roachhd/e76b1e9cf7e763551fd9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save roachhd/e76b1e9cf7e763551fd9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Raw
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);
Raw
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;
}
Raw
Words-Randomly-Flying-Into-Place.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment