Execute the setTimeout function when scrolling occurs

Question

Execute the setTimeout function when scrolling occurs

I need help delaying a timeout effect. Currently, the effect begins as soon as the page loads, but I want it to start when I scroll to a specific div. You can see how it currently functions here.

After some research, I came across a library called waypoint that allows triggering events based on waypoints using the code below. However, I have not had any success in implementing it. I also tried setting the display property to none and changing it once the CSS animation was triggered, but when it appeared on the page, the progress bars were already in place.

 var waypoint = new Waypoint({
  element: document.getElementById('waypoint'),
  handler: function(direction) {
    console.log('Scrolled to waypoint!')
  }
})

javascript jquery html css web

Answer 1

Answer №1

Here is the JSFiddle link where you can view my solution: https://jsfiddle.net/ab1cde2f/9/

I made some changes in the CSS by converting certain ID's into classes. In the Javascript section, I performed the following actions:

$(document).ready(function () {
    $('#startAnimation').waypoint(function () {
        setTimeout(function () {
            $('#progress-html').addClass('progress-html-class');
        }, 2800);

        setTimeout(function () {
            $('#progress-css').addClass('progress-css-class');
        }, 3500);

        setTimeout(function () {
            $('#progress-javascript').addClass('progress-javascript-class');
        }, 4200);

        setTimeout(function () {
            $('#progress-php').addClass('progress-php-class');
        }, 4900);

        setTimeout(function () {
            $('#progress-angular').addClass('progress-angular-class');
        }, 5600);
    });
});

In simple terms, with the help of JQuery, I set a waypoint to trigger animations when it reaches a specific row (identified by the id #startAnimation). Upon reaching this point, timeouts are used with different delays to add the required css classes which initiate the animations.

If you're unclear about any part of my implementation, feel free to ask for clarification.

Answer 2

Here is the JSFiddle link where you can view my solution: https://jsfiddle.net/ab1cde2f/9/

I made some changes in the CSS by converting certain ID's into classes. In the Javascript section, I performed the following actions:

$(document).ready(function () {
    $('#startAnimation').waypoint(function () {
        setTimeout(function () {
            $('#progress-html').addClass('progress-html-class');
        }, 2800);

        setTimeout(function () {
            $('#progress-css').addClass('progress-css-class');
        }, 3500);

        setTimeout(function () {
            $('#progress-javascript').addClass('progress-javascript-class');
        }, 4200);

        setTimeout(function () {
            $('#progress-php').addClass('progress-php-class');
        }, 4900);

        setTimeout(function () {
            $('#progress-angular').addClass('progress-angular-class');
        }, 5600);
    });
});

In simple terms, with the help of JQuery, I set a waypoint to trigger animations when it reaches a specific row (identified by the id #startAnimation). Upon reaching this point, timeouts are used with different delays to add the required css classes which initiate the animations.

If you're unclear about any part of my implementation, feel free to ask for clarification.

Answer 3

Answer №2

By utilizing a JavaScript function called onscroll(), you can create a smooth animation effect on your website. Simply assign the onscroll function to the div element and implement animations using setTimeout() and clearTimeout(). The onscroll() event function will continuously trigger the animation until it reaches the specified target div, at which point it will come to a halt.

Answer 4

By utilizing a JavaScript function called onscroll(), you can create a smooth animation effect on your website. Simply assign the onscroll function to the div element and implement animations using setTimeout() and clearTimeout(). The onscroll() event function will continuously trigger the animation until it reaches the specified target div, at which point it will come to a halt.

Execute the setTimeout function when scrolling occurs

Answer №1

Answer №2

Similar questions

Exploring the combination of Babel and Next.js: Integrating custom scripts into a project

The border bottom effect in Hover.css is malfunctioning when used in the Opera browser

The functionality of the dynamic drag and drop form builder is not functioning as expected in Angular 12

What method can be used to verify if Handlebar.js is integrated into the application?

Sending mass text messages with a customized message for each phone number - A guide using Twilio

Cancel the use of the $.each method when the specified variable is located

What could possibly be the issue here? The error message I received is: "Error: INSERT INTO.... Unknown column 'jon' in 'field list'"

Implementing file change detection using view model in Angular

Permission denied: Node.js bash was trying to access /usr/local/bin/node, but was unable

Having trouble with aligning the Bootstrap grid in the center? Something seems to be off

Having trouble with clearTimeout and clearInterval functions not functioning properly?

Guidelines for redirecting to ensure the presence of an HTML page within a directory URL

Unlocking Fields in SharePoint 2007: A Step-by-Step Guide to Enabling a Disabled Field with Checkbox Activation

Scanning the header of panel groups for information

The jQuery UI Tabs Ajax feature seems to only be displaying content in the first tab that is

Tips for building a modal box with HTML, CSS, and jquery!

Confused in the world of .net and jQuery

"Troubleshooting: Why isn't the ParamQuery Jquery Grid plugin showing

Determining the client web app version in HTTP requests

Angular: searcher function behaves differently based on the type of data being filtered