<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);
};
