"Line draw on mouse scroll"
Bootstrap 3.0.0 Snippet by jpyadav1237

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="lDraw">
<svg class="lDraw_sec" viewBox="0 0 1064 4500" stroke-width="2" fill="none" stroke="#194375">
<path id="triangle" d="M249,0l730,862L0,1556l1038,793L21,3202l1043,608l-759,759"></path>
</svg>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
#mySVG{position:fixed;width:400px;height:210px;}
.lDraw_sec{width:1000px;margin-left:100px;}
.lDraw{position:absolute;top:0;height:500px;z-index:-9;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();
triangle.style.strokeDasharray = length;
triangle.style.strokeDashoffset = length;
window.addEventListener("scroll", myFunction);
function myFunction() {
alert("Im in");
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = length * scrollpercent;
triangle.style.strokeDashoffset = length - draw;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rotating CSS Card
Form - Line
Bootstrap4 Card with Line-Tabs
Animated Vertical Bootstrap Carousel on Mouse scroll and Swipe

Questions / Comments: