How to do transition effects between two html pages

Question

I need to transition effect for between the html pages, when clicking menu or submenu's, page will be opened with transition effect. Please guide me, how to do that, Thanks in advance.

The below link is only have div transition not a page transition. it is possible to the same transition between html pages?

How I can add transitions between two HTML pages?

Answer 1

Here is a solution that requires some knowledge of CSS and Javascript:

In your DOM, where you put your links to the other pages, instead of using <a> tags, use an ordinary <span> and attach an onclick attribute, like this:

<span onclick="transitionToPage('https://www.google.com')"></span>

(You can use <a> and href, but you need to parse out the target href and prevent the default event.)

Then in your Javascript, put this code:

window.transitionToPage = function(href) {
    document.querySelector('body').style.opacity = 0
    setTimeout(function() { 
        window.location.href = href
    }, 500)
}

document.addEventListener('DOMContentLoaded', function(event) {
    document.querySelector('body').style.opacity = 1
})

Finally, in your CSS code:

body { 
   opacity: 0;
   transition: opacity .5s;
}

This will have the following effect:

1. When page loads, the body will fade in over half a second
2. When you click on a link, the body will fade out and after half a second the browser will go to the next page

Happy coding!