Activate animation while scrolling the page

I am using a progress bar with Bootstrap and HTML. Below is the code snippet:


$(".progress-bar").each(function () {
var progressBar = $(this);
progressBar.animate({
width: progressBar.data('width') + '%'
}, 1500);
});


<body>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class='jumbotron' style='height:1400px' width='auto'>
<h1>please scroll down</h1>
</div>

<div class="alert alert-success">
<div class="skill-name">ON PROGRESS 357/487</div>
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" data-width="70">
</div>
</div>
</div>

<div class="alert alert-danger">
<div class="skill-name">FAILED 30/487</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" data-width="30">
</div>
</div>
</div>

</body>

The issue I am facing is that the animation runs when the HTML loads, but I want it to only animate when I scroll down to view the progress bar. How can I achieve this?

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Check out this amazing resource:

Bootply : http://www.bootply.com/lRLMiaE7Gy

Jquery :

$(function(){
  $(window).scroll(function(){
    $(".progress-bar:not(.animated)").each(function(){
      if ($(this).is(':visible')) {
                var progressBar = $(this); // $(this) would work too
                progressBar.animate({
                    width: progressBar.data('width') + '%'
                }, 1500);
                progressBar.addClass('animated');
      }
    });
  }); 
});

Snippet 

$(function(){
  $(window).scroll(function(){
    $(".progress-bar:not(.animated)").each(function(){
      if ($(this).is(':visible')) {
                var progressBar = $(this); // $(this) would work too
                progressBar.animate({
                    width: progressBar.data('width') + '%'
                }, 1500);
                progressBar.addClass('animated');
      }
    });
  }); 
}); 
<body>
  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class='jumbotron' style='height:1400px' width='auto'>
<h1>scroll down for more</h1>

</div>


    <div class="alert alert-success">
      <div class="skill-name">WORK IN PROGRESS 357/487</div>
      <div class="progress">
        <div class="progress-bar progress-bar-primary" role="progressbar" data-width="70">
        </div>
      </div>
    </div>

<div class="alert alert-danger">
      <div class="skill-name">UNSUCCESSFUL ATTEMPTS 30/487</div>
      <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" data-width="30">
        </div>
      </div>
    </div>
  
  </body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Replacing URLs in Typescript using Ionic 3 and Angular

Currently facing some difficulties getting this simple task to work... Here is the URL format I am dealing with: https://website.com/image{width}x{height}.jpg My objective is to replace the {width} and {height} placeholders. I attempted using this func ...

javascriptangulartypescriptionic-framework

Avoiding interference with adjacent elements caused by long content in a div

Hey there, I could really use some help with my CSS layout, I'm pretty new to CSS and Flexbox and I'm trying to create a simple layout. The issue I'm running into is how to stop long content inside a pre tag from pushing other divs. Here& ...

htmlcssflexbox

Clicking on a JQuery element triggers an AJAX function, although the outcome is not aligned with the intended

Instead of using a fiddle for this task, I decided to work on it online since my knowledge of fiddles is limited. However, after multiple attempts and hours spent rewriting the code, I still can't get it right. The issue at hand requires that when cl ...

javascriptjqueryajax

Utilizing Javascript to create interactive images in HTML

Is there a way for JavaScript to open the current image in a new WINDOW when an ONCLICK event occurs? <script> function imgWindow() { window.open("image") } </script> HTML <img src="pond1.jpg" height="150" size="150" alt="Johnson Pond" ...

javascriptonclick

How can I ensure that the ons-scroller stays at the bottom when writing a JavaScript code in Onsen UI?

How can I ensure the ons-scroller stays at the bottom when writing JavaScript? This is the code I am using: <ons-page> <ons-toolbar> <div class="left"><ons-back-button>Return</ons-back-butto ...

javascriptangularjsonsen-ui

Button triggering an onclick event

Can you design a feature where clicking on each button reveals specific images with text and heading? The initial image is hidden and when another button is clicked, the previous image disappears and new one appears in its place. We would like to achieve t ...

htmljquerycss

Issues loading SVG pattern textures with PHP

While experimenting with SVG and PHP codes, I encountered a frustrating issue that has me stumped. I have an SVG image containing some shapes. Using the fill attribute and the def tag, I can easily apply textures to specific shapes using a simple GET var ...

phphtmlsvg

Experiencing delays with Angular 4 CLI's speed when running ng serve and making updates

After running ng serve, I noticed that the load time is at 34946 ms, which seems pretty slow and is impacting our team's performance. Additionally, when we update our code, it takes too long to reload the page. https://i.sstatic.net/lpTrr.png My Ang ...

javascriptnode.jsangularnpmangular-cli

steps for making a specific cell editable in tabulatorI'm happy to help

click here for image description required initializeTabulatortableBng() { let thisClass = this; let bngTableData = thisClass.tableDataWorm; function formatDecimal(cell) { var value = cell.getValue(); if (value !== null && value !== undefine ...

javascriptangulartabulator

Displaying all items in a collection as HTML using Node.js

I am looking to showcase all the items in my mongodb collection as HTML. In the past, I have accomplished this with simpler tasks, such as... router.get('/', function (req, res) { res.render('home', { title: 'Express', u ...

javascriptnode.jsmongodbpug

Postpone the processing of a message in the Service Bus Queue until a specific time using NodeJS

Despite trying multiple tutorials, I have been unable to achieve the desired result so far. Currently, my setup involves a nodejs app that sends messages to the Service Bus Queue and another nodejs app that continuously polls it. The goal is to schedule a ...

javascriptnode.jsazure

Sending JSON data results

I received this JSON response: {"data":[{"series":{"id":"15404","series_code":"TOS","publisher_id":"280","series_short_name":"Tales of Suspense","start_year":"1959","end_year":"1968","published":"1959-1968","type_id":"1","no_issues":"99","published_ ...

javascriptajaxjson

Create an interactive webpage that automatically generates new HTML elements after retrieving JSON data from a Web API during page load

I am currently in the process of developing a hybrid Android App using Phonegap/Apache Cordova. The main function of my app is to retrieve data from my web API, which is being served through JSON. I have implemented the following code snippet for this task ...

javascripthtmljsoncordova

The velocity of jQuery selectors

Which is more efficient: using only the ID as a selector or adding additional identifiers? For instance $('#element') vs $('#container #element') or getting even more detailed: $('body div#container div#element') ? ...

javascriptjqueryperformancejquery-selectors

Troubleshooting Google Charts, AJAX, and PHP: Issue with JSON encoding leading to error message "Data for arrayToDataTable is not

My current project involves using PHP/PDO/MSSQL to pass data from a database to a Google Chart via AJAX in .js. I'm encountering an issue that seems to be related to encoding. I've been following a tutorial at which hardcodes the data into the ...

javascriptphpjqueryajaxreact-google-charts

Is there a live password verification tool available?

Currently, I am conducting some initial research for my school's IT department as a student employee. The students at our institution are required to change their passwords every six months, but many of them struggle with the various password regulati ...

javascriptajax

AngularJS dropdown not reflecting changes when using ng-selected

While working with AngularJS, I have encountered an issue where the first child of the select element remains empty despite my efforts to populate it. Below is the HTML code snippet: <select id="connectTV" aria-label="How many Dish TVs" ng-model="conn ...

javascripthtmlangularjsangularjs-ng-repeat

Implementing a rate limit on the login API that is specific to individual IP addresses rather than being

I have successfully implemented the [email protected] module, but I am facing an issue where it is blocking the API globally instead of for a specific API that is receiving hits. This is my current code: const limiter = new RateLimit({ windo ...

javascriptnode.jsexpressbrute-forcerate-limiting

How come the changes in my react component's CSS are not updating in real-time?

After integrating redux into my create-react-app project, I've been struggling to implement a navigator that highlights the active "page link." To achieve this functionality, I am using a combination of react hooks (to maintain the current page state) ...

cssreactjswebpacksassmaterial-ui

Dragging and dropping an HTML canvas element causes its width and height to be reset to zero

I am currently developing a customizable dashboard that allows users to rearrange dashboard tiles (represented by div elements) and position them anywhere within the dashboard. HTML Structure The HTML structure is outlined in the snippet below: <div cl ...

htmljquerycanvasdrag-and-dropchart.js