TechQA.

Animation getting start when user see the Skill bar

561 views Asked by At

My problem is, I just learn js and jquery and i just practice how to make skill bar.

then i found some good code on here: CodePen

then i was try to put the code on my localhost website and the animation work really good.

but my problem is,i want to make the animation start when user scroll down and see the skill bar

and this is the code:

jQuery(document).ready(function(){
 jQuery('.skillbar').each(function(){
  jQuery(this).find('.skillbar-bar').animate({
   width:jQuery(this).attr('data-percent')
  },6000);
 });
});
body {
  font-family: 'Ubuntu', sans-serif;
  width:960px;
}

p{
  color:#525252;
  font-size:12px;
}

.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;
width:110px;
 font-weight:bold;
 font-size:13px;
 color:#ffffff;
 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;
}

.skill-bar-percent {
 position:absolute;
 right:10px;
 top:0;
 font-size:11px;
 height:35px;
 line-height:35px;
 color:#ffffff;
 color:rgba(0, 0, 0, 0.4);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>jQuery & CSS3 Skills Bar</h1>

<div class="skillbar clearfix " data-percent="20%">
 <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
 <div class="skillbar-bar" style="background: #e67e22;"></div>
 <div class="skill-bar-percent">20%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="25%">
 <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span></div>
 <div class="skillbar-bar" style="background: #3498db;"></div>
 <div class="skill-bar-percent">25%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="50%">
 <div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
 <div class="skillbar-bar" style="background: #2c3e50;"></div>
 <div class="skill-bar-percent">50%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="40%">
 <div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
 <div class="skillbar-bar" style="background: #5a68a5;"></div>
 <div class="skill-bar-percent">40%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="75%">
 <div class="skillbar-title" style="background: #333333;"><span>Wordpress</span></div>
 <div class="skillbar-bar" style="background: #525252;"></div>
 <div class="skill-bar-percent">75%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="100%">
 <div class="skillbar-title" style="background: #27ae60;"><span>SEO</span></div>
 <div class="skillbar-bar" style="background: #2ecc71;"></div>
 <div class="skill-bar-percent">100%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="70%">
 <div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span></div>
 <div class="skillbar-bar" style="background: #4288d0;"></div>
 <div class="skill-bar-percent">70%</div>
</div> <!-- End Skill Bar -->

<p><strong>SOURCE :</strong> http://w3lessons.info/2013/06/04/skill-bar-with-jquery-css3/</p>

javascript jquery html css
Original Q&A
1

There are 1 answers

2
Bilal Akbar On BEST ANSWER

You are almost there. To show the animation on scroll, all you need to do is to check if element is in the viewport so that user is seeing it right now. You can do so using some 3rd party library or small jQuery snippet. I have updated your code to check if progress bar is in viewport, then animate. Check comments on code.

// Function to check if given element is completely in viewport or not
// source : https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2

$.fn.isFullyInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementTop >= viewportTop && elementBottom <= viewportBottom;
};
jQuery(document).ready(function(){
  // on page ready check if element is already in viewport
  animateProgressBar();
});

$(window).on('resize scroll', function() {
  // on page resize or scroll check if element is in viewport
  animateProgressBar();
});


// if elemnt is visble in viewport , then animate
var animateProgressBar = function(){
    $('.skillbar').each(function() {
     if ($(this).isFullyInViewport()) {
      jQuery(this).find('.skillbar-bar').animate({
   width:jQuery(this).attr('data-percent')
  },600);
     }
  }); 
}
body {
  font-family: 'Ubuntu', sans-serif;
  width:960px;
}

p{
  color:#525252;
  font-size:12px;
}

.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;
width:110px;
 font-weight:bold;
 font-size:13px;
 color:#ffffff;
 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;
}

.skill-bar-percent {
 position:absolute;
 right:10px;
 top:0;
 font-size:11px;
 height:35px;
 line-height:35px;
 color:#ffffff;
 color:rgba(0, 0, 0, 0.4);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>jQuery & CSS3 Skills Bar</h1>
<div style="margin-bottom:600px;"></div>
<div class="skillbar clearfix " data-percent="20%">
 <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
 <div class="skillbar-bar" style="background: #e67e22;"></div>
 <div class="skill-bar-percent">20%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="25%">
 <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span></div>
 <div class="skillbar-bar" style="background: #3498db;"></div>
 <div class="skill-bar-percent">25%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="50%">
 <div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
 <div class="skillbar-bar" style="background: #2c3e50;"></div>
 <div class="skill-bar-percent">50%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="40%">
 <div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
 <div class="skillbar-bar" style="background: #5a68a5;"></div>
 <div class="skill-bar-percent">40%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="75%">
 <div class="skillbar-title" style="background: #333333;"><span>Wordpress</span></div>
 <div class="skillbar-bar" style="background: #525252;"></div>
 <div class="skill-bar-percent">75%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="100%">
 <div class="skillbar-title" style="background: #27ae60;"><span>SEO</span></div>
 <div class="skillbar-bar" style="background: #2ecc71;"></div>
 <div class="skill-bar-percent">100%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="70%">
 <div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span></div>
 <div class="skillbar-bar" style="background: #4288d0;"></div>
 <div class="skill-bar-percent">70%</div>
</div> <!-- End Skill Bar -->

<p><strong>SOURCE :</strong> http://w3lessons.info/2013/06/04/skill-bar-with-jquery-css3/</p>

jQuery Visible

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions