0
So erreichen Sie Fertigkeitsbalkenanimation auf dem spezifischen Abschnitt des Seitenblatts. Ich habe versucht, eine gleitende Skillbar-Animation zu machen, aber nicht den Effekt, den ich möchte. Es beginnt mit der Animation auf der Startseite, aber ich möchte, dass die Animation bei einem bestimmten Seitenabschnitt gestartet wird.Fertigkeitsbalkenanimation auf der Seite scrollen
In meinem unten Code möchte ich die Animation auf Seite Bildlauf von dritten-sek gestartet werden. Aber es passiert nicht. Bitte korrigieren Sie den Code mit dem angehängten Code-Schnipsel.
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 + "%");
}
}
);
});
});