How to do transition effects between two html pages

user_8911684 0
Viewed 17079

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?

css html jquery javascript
2 Answers

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!

user_33837510

You can always hide content of body and then fade it via JQuery. But that will work only in the case of entering page. If you want to add animation to leaving page then you have to go with Single Page Application, where you can add transitions at both levels.

user_23355140
Related