"Animated timeline Timeline"
Bootstrap 3.3.0 Snippet by Linkon

Post to Facebook Tweet this

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container">
<div class="row" style="position: relative;margin: 0;/*-webkit-transform: translate(0,90%);transform: translate(0,17.5%);*/">
<img src="images-home/process.jpg" alt="Fastlane" class="app-image visible-sm" style="width: 100%;" />
<div class="col-md-12 apps hidden-sm section-svg">
<div class="section-head">
<h2 class="section-title"><span class="abt white">About Fastlane Information Tech</span></h2>
<!-- <p class="section-description">Lorem Ipsum is simply dummy text of the inting and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> -->
</div>
<div class="" style="position: absolute;width:100%;top:175px;">
<svg id="route1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="350" viewBox="0 0 350 500">
<path id="path" fill="none" stroke="white" stroke-width="10" stroke-linecap="round" d="M600,0c-4.9,32.1-30.5,179.1-156,254c-14.9,8.9-155.1,90.3-230,22c-45.8-41.8-57.2-130.4-16-178
c48.8-56.4,155.3-36.6,208,6c80.1,64.8,88.6,225-2,388" />
</svg>
</div>
<div class="" style="position: absolute;left: calc(48% + 30px);top: 8%;">
<img src="https://goo.gl/images/8s3j7C" alt="Fastlane" style="width: 100%;height: auto;">
</div>
<div class="" style="position: absolute;left: calc(55% - 610px);top: 10%;">
<img src="images-home/img1.png" alt="Fastlane" style="width: 100%;height: auto;">
</div>
<div id="plan_text" class="" style="position: absolute;left: calc(50% + 15px);top: 530px;">
<img src="images-home/text4.png" alt="Fastlane">
</div>
<div class="img2" style="position: absolute;left: calc(57.5% + 300px);top: 14%;">
<img src="images-home/img2.png" alt="Fastlane" style="width: 100%;height: auto;">
</div>
<div class="" style="position: absolute;left: calc(52% - 413px);top: 460px;">
<svg id="route2" xmlns="http://www.w3.org/2000/svg" version="1.1" width="230%" height="530" viewBox="0 0 350 500">
<path id="path" fill="none" stroke="white" stroke-width="6" stroke-linecap="round" d="M270,150c-36,82.2-169.3,26-230.7,65.7c-26.3,17-43.2,73.4-25.3,106.3c7.4,13.7,24.1,25.1,116,33
c132.7,11.4,175.2-5.9,212,24c17.6,14.3,38.7,43.4,40,110" />
</svg>
</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
.app-image {
display: none;
}
.apps {
height: 3000px;
padding: 97px 0 0 0;
background-image: url(https://www.google.co.in/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjDzKP_85HSAhVG2LwKHdoaDmgQjRwIBw&url=http%3A%2F%2Fwallpaper-gallery.net%2Fwallpapers%2Fhd-blue-background-wallpapers.html&bvm=bv.146786187,d.dGc&psig=AFQjCNEDFDqNKvr3AU1CVN8SEpp8SN73JQ&ust=1487241342900862);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media all and (min-width: 991px) and (max-width: 1180px) {
}
@media screen and (min-width: 981px) and (max-width: 1320px) {
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
}
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
function layoutSettings() { wW = window.innerWidth, wH = $(window).height(), iPhoneTransVal = -iPhone.height() - (wH - iPhone.height()) / 2, 740 >= wW ? slider || initSlider() : slider && (slider.destroy(), slider = null, $(".swiper-slide").width(""))}
function initNavigation() { $("section").each(function(e) { sections[e] = new Section(e) }), getTransitionValues() }
function drawLine(e, t) {
var i = 0,
n = e.parent().attr("id"),
r = t.getTotalLength(),
s = e.offset().top - $(window).scrollTop(),
a = 1 - s / $(window).height(); "route1" == n && (a -= .2, a > 0 && (a = 1.35 * a), a >= 1 ? $("#plan_text").show("fast") : $("#plan_text").hide("fast")), "route2" == n && (a -= .45, a > 0 && (a = 1.7 * a), a >= 1 ? $("#design_text").show("fast") : $("#design_text").hide("fast")), "route4" == n && (a -= .55, a > 0 && (a = 1.6 * a), a >= 1 ? $("#code_text").show("fast") : $("#code_text").hide("fast")), "route5" == n && (a -= .45, a > 0 && (a = 1.8 * a), a >= 1 ? $("#qa_text").show("fast") : $("#qa_text").hide("fast")), "route6" == n && (a -= .47, a > 0 && (a = 1.5 * a), a >= 1 ? $("#deploy_text").show("fast") : $("#deploy_text").hide("fast")), i = a * r, 0 > i && (i = 0), t.style.strokeDasharray = [i, r].join(" ") }
function drawallLines(e, t) { $.each($("path"), function(e, t) {
var i = t;
drawLine($(this), i) }) }
// function TabletScroll() { this.init = function() { touchmoveDisabled = !0, $(document).on("touchend", initiPadVideo), $(document).swipe({ threshold: 100, allowPageScroll: "none", swipeUp: function() {!transitioning && currentSection < sections.length - 1 && (transitioning = !0, currentSection++, forward = !0, sections[currentSection].animate(forward)) }, swipeDown: function() {!transitioning && currentSection > 0 && (transitioning = !0, currentSection--, forward = !1, sections[currentSection].animate(forward)) } }) }, this.kill = function() { touchmoveDisabled = !1, $(document).swipe("destroy") } }
function initiPadVideo() { video.play(), video.pause(), console.log("iPad video initiated."), $(document).off("touchend", initiPadVideo) }
function getTransitionValues() { trValues[0] = { stripe: { duration: .5, values: { delay: 0, y: -30, rotationZ: 0, scaleX: 1, force3D: !0, ease: Quad.easeInOut } }, iPhone: { duration: .5, values: { delay: .7, y: 0, rotationZ: -15, force3D: !0, ease: Quad.easeInOut } }, article: { delay: { forward: 0, backward: 0 } }, timelineCtn: { duration: .5, values: { delay: 0, y: 0, opacity: 0, force3D: !0, ease: Quad.easeInOut } }, timeline: { duration: .5, values: { delay: 0, x: 0, force3D: !0, ease: Quad.easeInOut } }, video: { start: 0, end: 0 } }, trValues[1] = { stripe: { duration: 1.3, values: { delay: .2, y: -wH / 2, rotationZ: 0, scaleX: 1.3, force3D: !0, ease: Expo.easeInOut } }, iPhone: { duration: .8, values: { delay: .3, y: iPhoneTransVal, rotationZ: 0, force3D: !0, ease: Sine.easeInOut } }, article: { delay: { forward: 600, backward: 600 } }, timelineCtn: { duration: .8, values: { delay: .2, y: 130, rotationZ: 0, opacity: 1, force3D: !0, ease: Quint.easeInOut } }, timeline: { duration: .5, values: { delay: 0, x: "25%", force3D: !0, ease: Quad.easeInOut } }, video: { start: 2, end: 11 } }, trValues[2] = { stripe: { duration: 1.3, values: { delay: 0, y: -wH / 2, rotationZ: 180, force3D: !0, ease: Expo.easeInOut } }, iPhone: { duration: .8, values: { delay: .9, y: iPhoneTransVal, force3D: !0, ease: Quad.easeInOut } }, article: { delay: { forward: 600, backward: 600 } }, timelineCtn: { duration: .5, values: { delay: 0, y: -150, force3D: !0, ease: Quad.easeInOut } }, timeline: { duration: .5, values: { delay: 0, x: "50%", force3D: !0, ease: Quad.easeInOut } }, video: { start: 11, end: 23 } }, trValues[3] = { stripe: { duration: 1.3, values: { delay: 0, y: -wH / 2, rotationZ: 360, force3D: !0, ease: Expo.easeInOut } }, iPhone: { duration: .8, values: { delay: .9, y: iPhoneTransVal, force3D: !0, ease: Quad.easeInOut } }, article: { delay: { forward: 600, backward: 600 } }, timelineCtn: { duration: .5, values: { delay: 0, y: 130, force3D: !0, ease: Quad.easeInOut } }, timeline: { duration: .5, values: { delay: 0, x: "75%", force3D: !0, ease: Quad.easeInOut } }, video: { start: 23, end: 27.5 } }, trValues[4] = { stripe: { duration: 1.3, values: { delay: 0, y: -wH / 2, rotationZ: 540, force3D: !0, ease: Expo.easeInOut } }, iPhone: { duration: .7, values: { delay: 0, y: iPhoneTransVal, rotationZ: 0, force3D: !0, ease: Quad.easeOut } }, article: { delay: { forward: 600, backward: 0 } }, timelineCtn: { duration: .5, values: { delay: 0, y: -150, opacity: 1, force3D: !0, ease: Quad.easeInOut } }, timeline: { duration: .5, values: { delay: 0, x: "100%", force3D: !0, ease: Quad.easeInOut } }, video: { start: 27.5, end: video.duration } }, trValues[5] = { stripe: { duration: .5, values: { delay: .2, y: 0, rotationZ: 540, force3D: !0, ease: Sine.easeIn } }, iPhone: { duration: .7, values: { delay: 0, y: 2 * -wH, rotationZ: 15, force3D: !0, ease: Sine.easeIn } }, article: { delay: { forward: 0, backward: 0 } }, timelineCtn: { duration: .5, values: { delay: 0, y: 0, scaleX: 0, opacity: 0, force3D: !0, ease: Quad.easeInOut } }, timeline: { duration: .5, values: { delay: 0, x: "100%", force3D: !0, ease: Quad.easeInOut } } } }
function rotateSlide(e, t) {
var i, n = lastSwipeProgress - t,
r = n * (slidesNumber - 1),
s = $("#slider-images span").eq(e.activeIndex),
a = $("#slider-images span").eq(0 > n ? e.activeIndex + 1 : e.activeIndex - 1),
o = Math.min(90, 90 * r);
r >= 0 ? i = Math.max(-90, -90 + 90 * r) : 0 > r && (i = Math.min(90, 90 - -90 * r)), s.css({ transform: "rotate(" + o + "deg)" }), a.css({ transform: "rotate(" + i + "deg)" }), lastViableProgress = t }! function(e, t) { "object" == typeof module && "object" == typeof module.exports ? module.exports = e.document ? t(e, !0) : function(e) {
if (!e.document) throw new Error("jQuery requires a window with a document");
return t(e) } : t(e) }("undefined" != typeof window ? window : this, function(e, t) {
function i(e) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard React
Simple Vertical timeline
Animated Radio tab
Animated 3d social icon in css3

Questions / Comments: