CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Karthikeyan
Karthikeyan

Reputation: 183

How to do transition effects between two html pages

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?

Upvotes: 10

Views: 32928

Answers (2)

maxpaj
maxpaj

Reputation: 6771

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!

Upvotes: 20

Vipin Kumar
Vipin Kumar

Reputation: 6546

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.

Upvotes: 0

Related Questions