Bootstrap Snippet Text animation using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">     
<div class="footer-top">
    <div class="container">
        <div class="footer-logo col-xs-12 text-center">
            <h2 align="center" class="cssanimation leSnake sequence">Endlessness</h2>
        </div>
        <h3 align="center">Design by <a target="_blank" href="http://www.wedoodles.com/">Koshik ojha</h3>
    </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
body{margin:0;padding:0;}
.footer-top{
  background-color: #0F3661;
padding: 75px 0;}
.footer-logo h2 {
    color: #fff;
    font-size: 50px;
    margin: 0;
    text-transform: uppercase;
    text-align:center;
    font-family: 'Arimo', sans-serif;
}
h3{color:#fff;padding-top:5%;font-family: 'Arimo', sans-serif;}
h3 a{text-decoration:none;color:#fff;font-weight:900}
h2{width:100%;text-align:center;}
.open,.wipe{
    margin:0 auto;
    overflow:hidden
}
.open,.typing,.wipe{
    overflow:hidden
}
.cssanimation,.cssanimation span{
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both
}
.cssanimation span{
    display:inline-block
}
.infinite{
    -webkit-animation-iteration-count:infinite!important;
    animation-iteration-count:infinite!important
}
.leSnake span{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
function animateSequence(){for(var n=document.getElementsByClassName("sequence"),a=0;a<n.length;a++){var e=n[a],t=e.innerHTML;t=t.trim();var i="",m=100;for(l=0;l<t.length;l++)" "!=t[l]?(i+='<span style="animation-delay:'+m+"ms; -moz-animation-delay:"+m+"ms; -webkit-animation-delay:"+m+'ms; ">'+t[l]+"</span>",m+=150):i+=t[l];e.innerHTML=i}}function animateRandom(){for(var n=document.getElementsByClassName("random"),a=0;a<n.length;a++){var e=n[a],t=e.innerHTML;t=t.trim();var i=70,m=new Array,o=new Array;for(j=0;j<t.length;j++){for(;;){var r=getRandomInt(0,t.length-1);if(-1==m.indexOf(r))break}m[j]=r}for(l=0;l<m.length;l++){var s="",d=m[l];" "!=t[d]?(s='<span style="animation-delay:'+i+"ms; -moz-animation-delay:"+i+"ms; -webkit-animation-delay:"+i+'ms; ">'+t[d]+"</span>",o[d]=s):o[d]=t[d],i+=80}o=o.join(""),e.innerHTML=o}}function getRandomInt(n,a){return Math.floor(Math.random()*(a-n+1))+n}window.onload=function(){animateSequence(),animateRandom()};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Text animation"
Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Text animation" Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Text animation"
Bootstrap 4.1.1 Snippet by koshikojha