Bootstrap Snippet text svg animation using HTML CSS Bootstrap Javascript

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
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
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
*/
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
//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;
        }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"text svg animation"
Bootstrap 4.0.0 Snippet by mrservon22

Related: See More

Questions / Comments:

"text svg animation" Bootstrap 4.0.0 Snippet by mrservon22

Related: See More

Questions / Comments:

"text svg animation"
Bootstrap 4.0.0 Snippet by mrservon22