Jquery Skill bar effect starts when you scroll to the section

Question

I just want my skill bar effect starts when I scroll to that section for example im in my intro section when I scroll down to the skill section it will trigger the effect :) thank you so much!

HTML:

<div class="col-md-5 col-centered">
           <div class="skillbar clearfix " data-percent="95%">
  <div class="skillbar-title" style="background: #131313;"><span>Photography</span></div>
  <div class="skillbar-bar" style="background: #131313;"></div>
  <div class="skill-bar-percent">95%</div>
</div>

 <div class="skillbar clearfix " data-percent="85%">
  <div class="skillbar-title" style="background: #131313;"><span>Videography</span></div>
  <div class="skillbar-bar" style="background: #131313;"></div>
  <div class="skill-bar-percent">85%</div>
</div>

 <div class="skillbar clearfix" data-percent="75%">
  <div class="skillbar-title" style="background: #131313;"><span>Illustrator</span></div>
  <div class="skillbar-bar" style="background: #131313;"></div>
  <div class="skill-bar-percent">75%</div>
</div>

<script> 
jQuery('.skillbar').each(function(){
  jQuery(this).find('.skillbar-bar').animate({
    width:jQuery(this).attr('data-percent')
  },6000);
});

</script>

CSS:

.skillbar {
    position:relative;
    display:block;
    margin-bottom:15px;
    width:100%;
    background:#eee;
    height:35px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -webkit-transition:0.4s linear;
    -moz-transition:0.4s linear;
    -ms-transition:0.4s linear;
    -o-transition:0.4s linear;
    transition:0.4s linear;
    -webkit-transition-property:width, background-color;
    -moz-transition-property:width, background-color;
    -ms-transition-property:width, background-color;
    -o-transition-property:width, background-color;
    transition-property:width, background-color;
}

.skillbar-title {
    position:absolute;
    top:0;
    left:0;
    font-weight:bold;
    font-size:13px;
    color:#fff;
    background:#6adcfa;
    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:4px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.skillbar-title span {
    display:block;
    background:rgba(0, 0, 0, 0.1);
    padding:0 20px;
    height:35px;
    line-height:35px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.skillbar-bar {
height:35px;
width:0px;
background:#6adcfa;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
float: left;
}

.containers {
    min-height: 100%;
      height: 100vh;


}
.skill-bar-percent {
    position:absolute;
    right:10px;
    top:0;
    font-size:11px;
    height:35px;
    line-height:35px;
    color:#444;
    color:rgba(0, 0, 0, 0.4);
}

Thank you!

Show us some `html` too or try **[`animate.css`](https://daneden.github.io/animate.css/)** — Guruprasad J Rao, Jan 08 '16 at 04:27
**[Check this answer here](http://stackoverflow.com/a/16327815/2065039)** — Guruprasad J Rao, Jan 08 '16 at 05:19

Mi-Creativity · Accepted Answer · 2016-01-08T05:19:31.627

You need to compare the window .scrollTop() value against the vertical position .offset().top of the container div of the .skillbar. the latter div will enter the view when the window scroll position added to the value of the window height is just triggered larger than the top offset of the container div, or in other words, when:

jQuery(window).scrollTop() + jQuery(window).height() > jQuery('#skills').offset().top

Then the .animate() function will be triggered.

** Note that I assigned the id skills to the <div class="col-md-5 col-centered">

check this out:

JS Fiddle

var skillsDiv = jQuery('#skills');

jQuery(window).on('scroll', function() {
  var winT = jQuery(window).scrollTop(),
    winH = jQuery(window).height(),
    skillsT = skillsDiv.offset().top;
  if (winT + winH > skillsT) {
    jQuery('.skillbar').each(function() {
      jQuery(this).find('.skillbar-bar').animate({
        width: jQuery(this).attr('data-percent')
      }, 6000);
    });
  }
});

body{
  margin:0;
  padding:0;
  height:1200px;
}
#test{
  height:800px;
}
.skillbar {
    position:relative;
    display:block;
    margin-bottom:15px;
    width:100%;
    background:#eee;
    height:35px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -webkit-transition:0.4s linear;
    -moz-transition:0.4s linear;
    -ms-transition:0.4s linear;
    -o-transition:0.4s linear;
    transition:0.4s linear;
    -webkit-transition-property:width, background-color;
    -moz-transition-property:width, background-color;
    -ms-transition-property:width, background-color;
    -o-transition-property:width, background-color;
    transition-property:width, background-color;
}

.skillbar-title {
    position:absolute;
    top:0;
    left:0;
    font-weight:bold;
    font-size:13px;
    color:#fff;
    background:#6adcfa;
    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:4px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.skillbar-title span {
    display:block;
    background:rgba(0, 0, 0, 0.1);
    padding:0 20px;
    height:35px;
    line-height:35px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.skillbar-bar {
height:35px;
width:0px;
background:#6adcfa;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
float: left;
}

.containers {
    min-height: 100%;
      height: 100vh;


}
.skill-bar-percent {
    position:absolute;
    right:10px;
    top:0;
    font-size:11px;
    height:35px;
    line-height:35px;
    color:#444;
    color:rgba(0, 0, 0, 0.4);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!</div>
<div id="skills" class="col-md-5 col-centered">
           <div class="skillbar clearfix " data-percent="95%">
  <div class="skillbar-title" style="background: #131313;"><span>Photography</span></div>
  <div class="skillbar-bar" style="background: #131313;"></div>
  <div class="skill-bar-percent">95%</div>
</div>

 <div class="skillbar clearfix " data-percent="85%">
  <div class="skillbar-title" style="background: #131313;"><span>Videography</span></div>
  <div class="skillbar-bar" style="background: #131313;"></div>
  <div class="skill-bar-percent">85%</div>
</div>

 <div class="skillbar clearfix" data-percent="75%">
  <div class="skillbar-title" style="background: #131313;"><span>Illustrator</span></div>
  <div class="skillbar-bar" style="background: #131313;"></div>
  <div class="skill-bar-percent">75%</div>
</div>

You welcome @ElMucho, I'm glad it helped, enjoy coding; – Mi-Creativity Jan 08 '16 at 05:59 — Mi-Creativity, Jan 08 '16 at 05:59
So much better than most plugins out there. Thanks a lot – Whip Jun 07 '16 at 13:46 — Whip, Jun 07 '16 at 13:46

Jquery Skill bar effect starts when you scroll to the section

1 Answers1