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

The issue of deleting the incorrect document ID in React Firebase

Interrupt the current with an external factor

What is causing the collapsed-animation to malfunction in Vue3?

Unable to get Discord.js sample code functioning correctly

Posting several pictures with Protractor

Exploring the fundamentals of Jquery syntax and the powerful world of

Is it possible to manage how many times a functional react component re-renders based on changes in its state?

"Enhancing the speed of the JavaScript translate function when triggered by a scroll

What is the best way to destructure an array enclosed within the Promise keyword in JavaScript?

Can you explain the process of implementing @media queries in SASS?

What is the best way to implement validation for a textfield to prevent submission if a negative value is entered?

The error message is stating that the module located at C://.. does not have an exported member named "firebaseObservable"

Fetching data from the server using Angular and parsing it as JSON

Transform the data into put and choose the desired item

Executing an automated process of adding items to the shopping cart using Python without the need to have a

Avoiding cheating in a JavaScript game

Looking for an alternative to document.querySelectorAll?

Troubleshooting a problem with a personalized webkit scrollbar in Chrome

Could you provide the parameters for the next() function in Express?

Creating a CSS animation to mimic the fading in and out effect of the Mac scrollbar when scrolling begins