Can you smoothly load a new subpage in the background, update the URL, and fade it in while an animation is playing on the previous page?
Check out this example (jsFiddle) to see a simple animation:
$(document).ready(function() {
'use strict';
$('.r').on('click', function() {
var preWidth = $('.l').width(),
menuWidth = $('.r').width();
$('.l').animate({
left: '-' + preWidth
}, 2000, 'easeOutQuad');
$('.r').animate({
left: menuWidth
}, 2000, 'easeOutQuad', function() {
$('.page').css({
visibility: 'hidden'
});
});
});
});
Imagine it like a sliding door. Here's how it should function:
- Click on the right
div. - The two
divs slide outward. - In the background, the new page fades in as the sliding animation plays.
- The new page becomes fully visible and the URL changes accordingly.
I hope that explanation makes sense. I appreciate any help! Have a wonderful day.
UPDATE:
Initially, I encountered an issue with my browser's back button not working correctly when trying to load the first page "loader.html" with the animation. As a workaround, I utilized an if statement to monitor a variable's state. Is there a more efficient way to handle this situation?
window.addEventListener('popstate', function(f){
var bprsd = f.state;
if(bprsd == null){
bprsd = "loader.html";
}
if(bprsd = "loader.html" || " "){
bprsd = null;
location.reload();
}
});You can explore the test site here