How can I achieve a skill bar animation on a specific section of the page scroll? I have attempted to create a sliding skill bar animation, but it is not producing the desired effect. It currently starts animating at the beginning of the page, but I want it to start animating when scrolling to a specific section of the page.
In the code below, I am trying to initiate the animation on the scroll of third-sec. However, this is not happening as expected. Please help me fix the code by providing a snippet with the corrected code.
HTML
<section id="first-sec"></section>
<section id="second-sec"></section>
<section id="third-sec">
<div class="container">
<!-- First bar -->
<div class="progress-bar" data-percentage="95%">
<h4 class="progress-title-holder">
<span class="progress-title">HTML5</span>
<span class="progress-number-wrapper">
<span class="progress-number-mark">
<span class="percent"></span>
<span class="down-arrow"></span>
</span>
</span>
</h4>
<div class="progress-content-outter">
<div class="progress-content"></div>
</div>
</div>
<!-- Second bar -->
<div class="progress-bar" data-percentage="90%">
<h4 class="progress-title-holder clearfix">
<span class="progress-title">CSS3</span>
<span class="progress-number-wrapper">
<span class="progress-number-mark">
<span class="percent"></span>
<span class="down-arrow"></span>
</span>
</span>
</h4>
<div class="progress-content-outter">
<div class="progress-content"></div>
</div>
</div>
CSS
body{
margin:0;
}
#first-sec {
height:100vh;
background-color:#283c86;
}
#second-sec {
height:100vh;
background-color:#45a247;}
#third-sec {
}
/*====Skill Bar=====*/
.container {
height: 300px;
max-width: 100%;
width:70%;
margin: 10% auto;
}
.progress-bar {
margin: 20px 0 10px;
overflow: hidden;
/*padding-left:20px;
padding-right: 25px; /* Separate bars from container */
}
.progress-title-holder {
padding-bottom: 7px;
position: relative;
margin: 5px 0;
font-family: Montserrat, sans-serif;
font-size: 2e;
line-height: 15px;
font-weight: 400;
color: #2e2e2e;
}
.progress-title {
z-index: 100;
font-weight: bold;
}
.progress-number-wrapper {
width: 100%;
z-index: 10;
}
.progress-number-mark {
margin-bottom: 4px;
border-radius: 3px;
background-color: #00d2ff;
padding: 0 8px;
position: absolute;
bottom: 0;
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.progress-number-wrapper,
.progress-number-mark {
font-family: Open Sans, sans-serif;
font-size: 11px;
line-height: 24px;
height: 24px;
letter-spacing: 0px;
font-weight: 600;
font-style: normal;
text-transform: none;
color: #ffffff;
}
.down-arrow {
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid #00d2ff;
position: absolute;
left: 50%;
top: 100%;
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.progress-content-outter {
height: 12px;
background-color: #E1E1E0;
}
.progress-content {
height: 21px;
background-color: #00d2ff;
width: 0%;
}
JQUERY
// Skill Bar Animation
jQuery(document).ready(function() {
jQuery(".progress-bar").each(function() {
jQuery(this).find(".progress-content").animate(
{
width: jQuery(this).attr("data-percentage")
},
2000
);
jQuery(this).find(".progress-number-mark").animate(
{
left: jQuery(this).attr("data-percentage")
},
{
duration: 2000,
step: function(now, fx) {
var data = Math.round(now);
jQuery(this).find(".percent").html(data + "%");
}
}
);
});
});