Implement a jQuery feature to gradually increase opacity as the user scrolls and the page loads

Question

Implement a jQuery feature to gradually increase opacity as the user scrolls and the page loads

On a dynamically loaded page via pjax (except in IE), there are several links at the bottom.

Whenever one of these hyperlinks is clicked, the page scrolls to the top while still loading.

Although I am okay with this behavior, I'm curious if it's possible to add some opacity to the page while it's still loading. Please note that I'm unsure about finding a solution that would be compatible across both pjax and non-pjax browsers.

$(document).on('click', 'my-link a', function() {
  $('html, body').animate({ scrollTop: 0 }, 'fast');
})

;

javascript jquery html css pjax

Answer 1

Answer №1

Your inquiry seems a bit challenging for me to decipher, so I have created an illustration for you:

DEMO

HTML:

<body>
    <div class="loader"></div>    
    <div id="content">
        <img src="http://0.tqn.com/d/studenttravel/1/0/i/T/Silleteros-1.jpg" />
    </div>
</body>

JS:

$(window).load(function() {
        $("body").css({ opacity: 1.0 });
})

CSS:

body {
    opacity: 0.5;
}

While the page is loading, body has an opacity of 0.5, and once the page finishes loading, it transitions to an opacity of 1.0.

I've also included code in the example fiddle to prevent image caching, ensuring that the effect always displays when running the fiddle (if you don't see the effect initially, try running it again). I hope this clarifies things for you.

Answer 2

Your inquiry seems a bit challenging for me to decipher, so I have created an illustration for you:

DEMO

HTML:

<body>
    <div class="loader"></div>    
    <div id="content">
        <img src="http://0.tqn.com/d/studenttravel/1/0/i/T/Silleteros-1.jpg" />
    </div>
</body>

JS:

$(window).load(function() {
        $("body").css({ opacity: 1.0 });
})

CSS:

body {
    opacity: 0.5;
}

While the page is loading, body has an opacity of 0.5, and once the page finishes loading, it transitions to an opacity of 1.0.

I've also included code in the example fiddle to prevent image caching, ensuring that the effect always displays when running the fiddle (if you don't see the effect initially, try running it again). I hope this clarifies things for you.

Answer 3

Answer №2

Based on the type of content being loaded, you have the option to incorporate event listeners for the onload process. Additionally, you can implement actions such as scrolling or adjusting opacity levels when triggered by a 'onclick' event, and then revert back to their original state upon 'onload.'

Answer 4

Based on the type of content being loaded, you have the option to incorporate event listeners for the onload process. Additionally, you can implement actions such as scrolling or adjusting opacity levels when triggered by a 'onclick' event, and then revert back to their original state upon 'onload.'

Implement a jQuery feature to gradually increase opacity as the user scrolls and the page loads

Answer №1

Answer №2

Similar questions

Div remains fixed while scrolling until the footer is reached

What could be causing my carousel slider images to not adapt to different screen sizes?

Attempting to bring in HTML through a helper, but Rails doesn't seem too thrilled about it

Troubles with double borders in HTML's opaque border feature

What could be causing this error to occur when running my React app and clicking the submit button on the form?

Ajax dropdown menu displaying 'Loading Data' message during processing

Unable to successfully download npm packages - encountered an error running `[email protected] install: `node-pre-gyp install --fallback-to-build` on Ubuntu 18.04 system

Scrolling infinitely within the side menu using ion-infinite-scroll

Check the connection to the database and provide a response indicating whether it is successful or

Creating a visible block in ReactJS: Step-by-step guide

I'm curious about the reason behind the error message stating "Navbar is defined but never used" popping up while working with Vue

What is the method for sending these variables via POST?

Using Angular material to display a list of items inside a <mat-cell> element for searching

Center-aligned footer with a sleek right border in Bootstrap 4.1.1

Achieving centered text alignment in a span using Bootstrap 5

Unable to retrieve hours from MongoDB date array

Oops! We encountered an issue in locating the Entry Module. The error message is indicating that it cannot find the specified source file

What are the risks of employing conditional rendering in react-router-dom for authentication purposes?

The Vuex mutation does not execute synchronously and does not resolve as a promise

What causes the size of an image to decrease when placed within an anchor tag?