Bootstrap Snippet Animate Paragrapth using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animate Paragrapth"
Bootstrap 3.2.0 Snippet by Sagar Joshi

Related: See More

Questions / Comments:

"Animate Paragrapth" Bootstrap 3.2.0 Snippet by Sagar Joshi

Related: See More

Questions / Comments:

"Animate Paragrapth"
Bootstrap 3.2.0 Snippet by Sagar Joshi