"text svg animation"
Bootstrap 4.0.0 Snippet by mrservon22

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <style type="text/css"> </style> <body> <div class="container"> <div class="row"> <div class="col-xs-12"> <h1><a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im Shakib.", "I am a web Designer.", "I Love Design.", "I Love to Develop.","I Love My Job." ]'> <span class="wrap"></span></a> </h1> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="jumbotron"> <h1>Bootstrap Affix Example</h1> </div> </div> <div class="col-xs-3"> <nav id="mainNavbar"> <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="200"> <li class="active"><a href="#divDesert">Desert</a></li> <li><a href="#divLighthouse">Lighthouse</a></li> <li><a href="#divTulips">Tulips</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Animals <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#divJellyfish">Jellyfish</a></li> <li><a href="#divPenguins">Penguins</a></li> </ul> </li> </ul> </nav> </div> <div class="col-xs-9"> <div id="divDesert"> <h1>Desert</h1> <img src="Images/Desert.jpg" class="img-responsive" /> </div> <div id="divLighthouse"> <h1>Lighthouse</h1> <img src="Images/Lighthouse.jpg" class="img-responsive" /> </div> <div id="divTulips"> <h1>Tulips</h1> <img src="Images/Tulips.jpg" class="img-responsive" /> </div> <div id="divJellyfish"> <h1>Jellyfish</h1> <img src="Images/Jellyfish.jpg" class="img-responsive" /> </div> <div id="divPenguins"> <h1>Penguins</h1> <img src="Images/Penguins.jpg" class="img-responsive" /> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script src="bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('body').scrollspy({ target: '#mainNavbar', offset: 10 }); }); </script>
body {position: relative; background-color:black; text-align: center; color:#000;padding-top:10em;} .affix {top: 20px;} /* Affix plugin data-spy="affix" - Apply this attribute on the element that you want to affix data-offset-top - Specifies when to toggle the pinning of an element */
//made by vipul mirajkar thevipulm.appspot.com var TxtType = 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; }; TxtType.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 = 200 - 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() { that.tick(); }, delta); }; window.onload = function() { var elements = document.getElementsByClassName('typewrite'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-type'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtType(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}"; document.body.appendChild(css); };

Related: See More


Questions / Comments: