Bootstrap Snippet typing text animation css js using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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="row">
<div id="o"><div id="m"><div id="i">
<h1><span class="errorText" data-delay="1000" data-errmsg='["Error 404","Page not found.","Sincere apologies...","nop, aint here."]'></span></h1>
<h2>The requested document has not been found on this server.</h2>
</div></div></div>
</div>
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
html,body {
    padding: 1em 2em;
    font-size: 18px;
    background: #222;
    color: #FF9800;
}
h1,h2 {
    font-weight: 200;
    margin: 0.4em 0;
    text-align: center;
}
h1{
    font-size: 3.5em; 
}
h2{
    color: #888;
    font-size: 2em;
}
#o{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}
#m{
    display: table-cell;
    vertical-align: middle;
}
#i{
    margin-left: auto;
    margin-right: auto;
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
var ErrTxtRotate = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};
ErrTxtRotate.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];
  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }
  this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
  var that = this;
  var delta = 300 - Math.random() * 100;
  if (this.isDeleting) { delta /= 2; }
  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }
  setTimeout(function() {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"typing text animation css js"
Bootstrap 4.0.0 Snippet by aubm1

Related: See More

Questions / Comments:

"typing text animation css js" Bootstrap 4.0.0 Snippet by aubm1

Related: See More

Questions / Comments:

"typing text animation css js"
Bootstrap 4.0.0 Snippet by aubm1