Question 35527 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

I want to trigger the animation of the progress bar whenever I scroll down to a particular section of the website – Jquery

I have added animation by putting progress bar in section of website but it gets triggered with page load.

I want the animation to be triggered whenever the user visits that particular section.

body {
  margin: 0;
  background-color: #101214;
}

.title {
  text-align: center;
  color: #fff;
}

.right {
  color: white;
}

.progress-bar {
  background-color: #959595;
  width: 600px;
  height: 10px;
  border-radius: 5px;
}

.progress-bar div {
  height: 1rem;
  border-radius: 5px;
  width: 0%;
}

.progress-bar div span {
  height: 40px;
  width: 40px;
  float: right;
  margin-top: -12px;
  color: #d1d8e0;
  display: flex;
  align-items: center;
  justify-self: center;
  font-size: 0.625rem;
}

.bar {
  background-color: #374850;
  animation: bar 1s linear forwards;
}

@keyframes bar {
  100% {
    width: 100%;
  }
}
<h1 class="title">My Skills</h1>
<div class="right">
  <h2>Builder Reliability</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Construction Quality</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Connectivity</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Competitive pricing</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Is this what you want :

    hover will do the trick as follows :

    .progress-bar:hover .bar {
  background-color: #374850;
  animation: bar 1s linear forwards;
}

    body {
  margin: 0;
  background-color: #101214;
}

.title {
  text-align: center;
  color: #fff;
}

.right {
  color: white;
}

.progress-bar {
  background-color: #959595;
  width: 600px;
  height: 10px;
  border-radius: 5px;
}

.progress-bar div {
  height: 1rem;
  border-radius: 5px;
  width: 0%;
}

.progress-bar div span {
  height: 40px;
  width: 40px;
  float: right;
  margin-top: -12px;
  color: #d1d8e0;
  display: flex;
  align-items: center;
  justify-self: center;
  font-size: 0.625rem;
}

.progress-bar:hover .bar {
  background-color: #374850;
  animation: bar 1s linear forwards;
}

@keyframes bar {
  100% {
    width: 100%;
  }
}
    <h1 class="title">My Skills</h1>
<div class="right">
  <h2>Builder Reliability</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Construction Quality</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Connectivity</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Competitive pricing</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    If you want the animation active, We can use mouseleave event to preserve it.

    $( ".progress-bar" ).mouseleave(function() {
  $( this ).find(".bar").removeClass('bar').addClass('animClass');
});
    body {
  margin: 0;
  background-color: #101214;
}

.title {
  text-align: center;
  color: #fff;
}

.right {
  color: white;
}

.progress-bar {
  background-color: #959595;
  width: 600px;
  height: 10px;
  border-radius: 5px;
}

.progress-bar div {
  height: 1rem;
  border-radius: 5px;
  width: 0%;
}

.progress-bar div span {
  height: 40px;
  width: 40px;
  float: right;
  margin-top: -12px;
  color: #d1d8e0;
  display: flex;
  align-items: center;
  justify-self: center;
  font-size: 0.625rem;
}

.progress-bar:hover .bar {
  background-color: #374850;
  animation: bar 1s linear forwards;
}

.animClass {
  background-color: #374850;
  animation: bar 1s linear forwards;
}

@keyframes bar {
  100% {
    width: 100%;
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="title">My Skills</h1>
<div class="right">
  <h2>Builder Reliability</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Construction Quality</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Connectivity</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
  <h2>Competitive pricing</h2>
  <div class="progress-bar">
    <div class="bar"><span>100%</span></div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search