javascript – Start animation when scrolled into view


I have progress bars on my website to visually display percentages, which have an animation to make them scroll along the page. However this animation starts as soon as the page is loaded, my issue is the progress bars are lower down the page, and when the page is loaded you cannot see the animation in time. Is there any way to start the animation only when the element is in view?

Thank you for your time. 🙂

CSS:

  0%   {width: 0%;}
  10%   {width: 0%;}
  100% {max-width: 100%;}
}

.bara1 {
  border-radius: 1px 25px 25px 1px;
  padding: 16px;
  background-color: #7ac1cf;
  position: relative;
  margin-bottom: -32px;
  z-index:2;
  animation-name: example;
  animation-duration: 6s;


}

.barb1 {
  border-radius: 1px 25px 25px 1px;
  padding: 16px;
  background-color: #e3e3e3;
  position: relative;
  margin-bottom: 8px;
  z-index:1;
}

.textbox {
  position: absolute;
  color: #ffffff;
  margin-top: -12px;
}

HTML:

 <div class="barb1"></div>
  
   <div class="bara1" style="width: 78%"><div class="textbox"><b>text</b>&nbsp;&nbsp;<font size="2px"color="#def7fc">78%</font></div></div>
 <div class="barb1"></div>
  
    <div class="bara1" style="width: 56%"><div class="textbox"><b>text</b>&nbsp;&nbsp;<font size="2px"color="#def7fc">56%</font></div></div>
 <div class="barb1"></div>
  
   <div class="bara1" style="width: 40%"><div class="textbox"><b>text</b>&nbsp;&nbsp;<font size="2px"color="#def7fc">40%</font></div></div>
 <div class="barb1"></div>
  
    <div class="bara1" style="width: 31%"><div class="textbox"><b>text</b>&nbsp;&nbsp;<font size="2px"color="#def7fc">31%</font></div></div>
 <div class="barb1"></div>



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here