Parallax Effect Slows Down When Scrolling In Web Page

Question

Parallax Effect Slows Down When Scrolling In Web Page

Currently in the process of creating a website with a scrolling parallax effect using Stellar.js on the header and three other sections. However, I'm experiencing lag when scrolling, especially at the top of the page.

I've attempted to reduce lag by compressing background images, but it hasn't had much impact. Removing the blur effect helped slightly, but didn't completely resolve the issue.

The website performs well on Firefox (Windows 10) with minimal frame drops, but experiences significant lag on Chrome (both Windows and macOS) and Safari browsers.

There are several JS scroll-triggered scripts in use, but unsure if they may be contributing to the problem. Any recommendations or suggestions?

javascript jquery html css parallax

Answer 1

Answer №1

If you want to control the frequency of scroll events, consider implementing event throttling. With debouncing, an event is delayed until a certain amount of time has passed before firing again. Throttling, on the other hand, limits how often an event can occur within a specific timeframe.

Here's a sample function for event throttling (credit: )

// Implement the throttle function
function throttle(callback, limit) {
    var waiting = false;              // Initially not waiting
    return function() {               // Return a throttled function
        if (!waiting) {                // If not currently waiting
            callback.call();           // Execute user's function
            waiting = true;             // Prevent future invocations
            setTimeout(function() {    // Set a timeout
                waiting = false;        // Allow future invocations
            }, limit);
        }
    }
}

To apply this function, use it like this:

function callback() {
    console.count("Throttled");
}

window.addEventListener("scroll", throttle(callback, 200));

Answer 2

If you want to control the frequency of scroll events, consider implementing event throttling. With debouncing, an event is delayed until a certain amount of time has passed before firing again. Throttling, on the other hand, limits how often an event can occur within a specific timeframe.

Here's a sample function for event throttling (credit: )

// Implement the throttle function
function throttle(callback, limit) {
    var waiting = false;              // Initially not waiting
    return function() {               // Return a throttled function
        if (!waiting) {                // If not currently waiting
            callback.call();           // Execute user's function
            waiting = true;             // Prevent future invocations
            setTimeout(function() {    // Set a timeout
                waiting = false;        // Allow future invocations
            }, limit);
        }
    }
}

To apply this function, use it like this:

function callback() {
    console.count("Throttled");
}

window.addEventListener("scroll", throttle(callback, 200));

Parallax Effect Slows Down When Scrolling In Web Page

Answer №1

Similar questions

encountering a problem integrating react-dropzone into a project using react-16.13.1

"Unfortunately, SimplyScroll isn't functioning properly on this particular page

Avoid running multiple YouTube views simultaneously within an AngularJS application

The JavaScript array on its second usage had a length of '0', yet it still contained objects within it

Tips for incorporating the numerous values of a one-to-many relationship into an HTML template using Django

What is causing the Unhandled Rejection (TypeError) error after I move the object in my Redux application and receive the message "Cannot read property 'filter' of undefined"?

Execution priority of Javascript and PHP in various browsers

Guide to retrieving RabbitMQ queue messages in Vue.js application

Replicating JavaScript functions with the power of Ajax

CSS: The deleted style refuses to disappear

AngularJS is encountering an issue with the callback function, resulting in an error

Is there a way to automatically refresh a webpage whenever there are changes

Passing a value through jQuery Ajax when selecting an option (onchange) to store in a PHP variable on the same page without

Looking for a way to choose an Object using the key value in VueJS?

When refreshed using AJAX, all dataTable pages merge into a single unified page

Utilizing PHP to dynamically generate href links based on radio button selection in real-time interaction with JavaScript

Unable to manipulate dynamically added content using .load method

One-click URL to trigger iPhone/iPad or Android app to open automatically in browser

What is the best way to create an element that is clickable but transparent in appearance?

What is the best way to generate dynamic components on the fly in ReactJS?