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

I'm having an issue with my progress bar in ReactJS - it seems to move when I scroll the window instead of

Navigate within a div using arrow keys to reposition another div

Troubleshooting a navigation issue in Angular involving the mat-sidenav element of material UI while transitioning between components

Show the JSON data from the server in a table format

The connections of directives

Using Javascript/JQuery to apply pixel values in CSS styling

Flag a specific property on a directive scope as needing an update

How can I retrieve the POST values using xmlhttp?

Having issues with accessing data from Informix database in PHP due to an undefined index?

Content towering over the footer

At what point is ng-if triggered?

Unexpected behavior with first-child selector in a simple CSS code

Drop items next to the specified keys. Vanilla JavaScript

The background color and border are not showing up in the <div> element

Display a button within a table depending on the content of adjacent cells

Leverage AJAX on the client-side for optimal performance while utilizing node.js

Retrieving information from a database by employing AngularJS with the assistance of PHP

Ways to dynamically update a div with data from a JSON response

how can I use jQuery to disable clickable behavior in HTML anchor tags?

At times, JavaScript interacts with Selenium to click on the login button before I have the chance