Issue with the Animated Skill Bar not functioning properly when scrolling

Question

Issue with the Animated Skill Bar not functioning properly when scrolling

I've been trying to implement an animated skill bar in my Portfolio using JQuery, but I'm facing some challenges. Despite following various tutorials, the code doesn't seem to work as expected. I've tried calculating section scroll position and window scroll position, changing parent divs and child divs, but the outcome remains unchanged. Here is My Updated Code

$(document).ready(function() {
  var skillBar = $('.skill-body');
  $(window).scroll(function() {
    var SkillLocation = $("#Education-Skill").offset().top;
    var scrollLocation = $(this).scrollTop();

    skillBar.each(function() {
      if (SkillLocation <= scrollLocation) {
        $(this).find('.inner-skill-bar').animate({
          width: $(this).attr('data-percent')
        }, 2000);
      }
    });
  });
});

.outer-skill-bar {
  height: 26px;
  width: 100%;
  border: 1px solid black;
}

.inner-skill-bar {
  height: 100%;
  width: 0%;
  background: lightcoral;
  border-right: 0.5px solid rgb(146, 136, 136);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="Education-Skill">
  <div class="row">
    <div class="col-md-6 skill" id="skill">
      <div class="all-skill">

        <div class="my-skill">
          <div class="skill-head d-flex">
            <i class="fab fa-html5 fa-lg"></i>
            <p>HTML5</p>
          </div>
          <div class="skill-body d-flex" data-percent="90%">
            <div class="outer-skill-bar">
              <div class="inner-skill-bar"></div>
            </div>
            <div class="percent">
              <p class="skill-value">90%</p>
            </div>
          </div>

        </div>
        <!--my-skill-->
        <div class="my-skill">
          <div class="skill-head d-flex">
            <i class="fab fa-css3-alt fa-lg"></i>
            <p>CSS3</p>
          </div>
          <div class="skill-body d-flex" data-percent="80%">
            <div class="outer-skill-bar">
              <div class="inner-skill-bar"></div>
            </div>
            <div class="percent">
              <p class="skill-value">80%</p>
            </div>
          </div>
        </div>
        <!--my-skill-->

      </div>
      <!--all skill-->
    </div>
    <!--col-->
  </div>
  <!--row-->
</div>
<!--Container-->

javascript jquery html css scroll

Answer 1

Answer №1

If you want to trigger the animation when a specific element appears on your screen, you can adjust the skillPosition variable to start it at the right time. In this particular case, I set it to - 100, but feel free to customize it according to your needs:

$(document).ready(function(){
var skillBar = $('.skill-body');
$(window).scroll(function(){
var SkillLocation = $("#Education-Skill").offset().top;
var scrollLocation = $(this).scrollTop();

skillBar.each(function(){
if(SkillLocation - 100 <= scrollLocation)
{
$(this).find('.inner-skill-bar').animate({width:$(this).attr('data-percent')}, 2000);
}
});
});
});

.vertical-offset {
  width: 100%;
  height: 250px;
}

.outer-skill-bar{
height: 26px;
width: 100%;
border: 1px solid black;
}
.inner-skill-bar{
height: 100%;
width: 0%;
background: lightcoral;
border-right: 0.5px solid rgb(146, 136, 136);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vertical-offset">Scroll down...</div>
<div class="container" id="Education-Skill">
<div class="row">
      <div class="col-md-6 skill" id="skill">
<div class="all-skill">

            <div class="my-skill">
              <div class="skill-head d-flex">
                <i class="fab fa-html5 fa-lg"></i>
                <p>HTML5</p>
              </div>
              <div class="skill-body d-flex" data-percent="90%">
                <div class="outer-skill-bar">
                  <div class="inner-skill-bar"></div>
                </div>
                <div class="percent">
                  <p class="skill-value">90%</p>
                </div>
              </div>

            </div> <!--my-skill-->
            <div class="my-skill">
              <div class="skill-head d-flex">
                <i class="fab fa-css3-alt fa-lg"></i>
                <p>CSS3</p>
              </div>
              <div class="skill-body d-flex" data-percent="80%">
                <div class="outer-skill-bar">
                  <div class="inner-skill-bar"></div>
                </div>
                <div class="percent">
                  <p class="skill-value">80%</p>
                </div>
              </div>
            </div> <!--my-skill-->

          </div><!--all skill-->
        </div> <!--col-->
     </div> <!--row-->
</div> <!--Container-->
<div class="vertical-offset"></div>

Answer 2

If you want to trigger the animation when a specific element appears on your screen, you can adjust the skillPosition variable to start it at the right time. In this particular case, I set it to - 100, but feel free to customize it according to your needs:

$(document).ready(function(){
var skillBar = $('.skill-body');
$(window).scroll(function(){
var SkillLocation = $("#Education-Skill").offset().top;
var scrollLocation = $(this).scrollTop();

skillBar.each(function(){
if(SkillLocation - 100 <= scrollLocation)
{
$(this).find('.inner-skill-bar').animate({width:$(this).attr('data-percent')}, 2000);
}
});
});
});

.vertical-offset {
  width: 100%;
  height: 250px;
}

.outer-skill-bar{
height: 26px;
width: 100%;
border: 1px solid black;
}
.inner-skill-bar{
height: 100%;
width: 0%;
background: lightcoral;
border-right: 0.5px solid rgb(146, 136, 136);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vertical-offset">Scroll down...</div>
<div class="container" id="Education-Skill">
<div class="row">
      <div class="col-md-6 skill" id="skill">
<div class="all-skill">

            <div class="my-skill">
              <div class="skill-head d-flex">
                <i class="fab fa-html5 fa-lg"></i>
                <p>HTML5</p>
              </div>
              <div class="skill-body d-flex" data-percent="90%">
                <div class="outer-skill-bar">
                  <div class="inner-skill-bar"></div>
                </div>
                <div class="percent">
                  <p class="skill-value">90%</p>
                </div>
              </div>

            </div> <!--my-skill-->
            <div class="my-skill">
              <div class="skill-head d-flex">
                <i class="fab fa-css3-alt fa-lg"></i>
                <p>CSS3</p>
              </div>
              <div class="skill-body d-flex" data-percent="80%">
                <div class="outer-skill-bar">
                  <div class="inner-skill-bar"></div>
                </div>
                <div class="percent">
                  <p class="skill-value">80%</p>
                </div>
              </div>
            </div> <!--my-skill-->

          </div><!--all skill-->
        </div> <!--col-->
     </div> <!--row-->
</div> <!--Container-->
<div class="vertical-offset"></div>

Answer 3

Answer №2

Avoid using the scroll event listener as it can negatively impact browser performance.

Instead, consider using Intersection Observer (IO) which is specifically designed for handling these types of situations. IO allows you to respond when an HTML element intersects with another or with the viewport.

For a detailed guide on how to animate an element when it comes into view, check out this page (scroll all the way down).

Here's a brief summary of what you need to do:

Start by creating a new observer:

var options = {
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

This code specifies that the callback function will be executed when your target element is fully visible in the viewport (threshold of 1). You can adjust the threshold percentage as needed.

Next, define the elements to be observed, such as the counter elements in your case:

var target = document.querySelector('.counter');
observer.observe(target);

Finally, specify what action should be taken when the element becomes visible by defining the callback function:

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    // Implement your animation logic here
  });
};

If you require support for older browsers, use the official polyfill provided by w3c.

To prevent triggering the animation multiple times when an element re-enters the viewport, you can also unobserve the element once it has been animated.

Answer 4

Avoid using the scroll event listener as it can negatively impact browser performance.

Instead, consider using Intersection Observer (IO) which is specifically designed for handling these types of situations. IO allows you to respond when an HTML element intersects with another or with the viewport.

For a detailed guide on how to animate an element when it comes into view, check out this page (scroll all the way down).

Here's a brief summary of what you need to do:

Start by creating a new observer:

var options = {
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

This code specifies that the callback function will be executed when your target element is fully visible in the viewport (threshold of 1). You can adjust the threshold percentage as needed.

Next, define the elements to be observed, such as the counter elements in your case:

var target = document.querySelector('.counter');
observer.observe(target);

Finally, specify what action should be taken when the element becomes visible by defining the callback function:

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    // Implement your animation logic here
  });
};

If you require support for older browsers, use the official polyfill provided by w3c.

To prevent triggering the animation multiple times when an element re-enters the viewport, you can also unobserve the element once it has been animated.

Issue with the Animated Skill Bar not functioning properly when scrolling

Answer №1

Answer №2

Similar questions

Are you considering getting rid of a function?

Tips for aligning the text of a typography element in Material-UI when its parent is fixed

Elevate your web design by transitioning from Bootstrap 4 to Bootstrap 5

Safari iOS does not properly support responsive images when using srcset and sizes

Issue with inserting data into MySQL database using Node.js (JavaScript)

Instructions for transferring the model to an ASP.NET controller from a ASP.NET Razor view utilizing jQuery

Angular.js dynamically changing ng-class based on long-polling updates to a monitored variable

Deleting items from an array in ReactJS

Angular framework does not trigger the button click event

Can a new :input be dynamically added to jQuery?

Experience the power of Kendo UI Date Picker combined with AngularJS. When the datepicker is initialized, it starts

The TD border is slicing through the div and is placed on the table in IE standards, causing it

What is the process for attaching an on-click event listener by utilizing an argument that is passed to a function in JavaScript?

Guide for executing Java code and displaying HTML form fields concurrently in JSP

Generate a distinct identifier for the select element ID whenever a new row of data is inserted into a table

Angular.js is throwing an error at line 13708, stating: "Error: [ng:areq] Function 'homeController' is missing or undefined."

Laravel validation successfully validates Vanilla AJAX request, but the controller does not receive the values

Insert information into the dataString and then send it to the ajax data parameter

What is the best way to determine the total number of rows that have been generated by the Asp:Repeater?

issue encountered while attaching css file / css styles not rendering