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>

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);

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;
}

Words-Randomly-Flying-Into-Place.markdown

Words Randomly Flying Into Place

just	a	silly	demo
demonstrating	tables	in	markdown

Forked from Chris Coyier's Pen Words Randomly Flying Into Place.

A Pen by Captain Anonymous on CodePen.

License.