Transition effect on page load with url

Question

This code redirects to example-page.php:

setTimeout(function() {
  window.location.href = "/example-page.php";
}, 5000);

I'm trying to add a transition effect, so when it redirects, it looks like it's scrolling left or right off the page to the other. Any help would be greatly appreciated! I've tried using Jquery but i'm still fairly new and struggling.

Answer 1

You could try something like this:

var elements = document.getElementsByTagName('body');
setTimeout(function(){
 elements[0].style.opacity = 1;
    (function fade(){
        var opacloader = parseFloat(elements[0].style.opacity);

        (elements[0].style.opacity = opacloader - .1)<0.1?window.location.href='example':setTimeout(fade,40)})();
},4800);

What basically happens here is:

After 4.8 seconds, the actual page's body is faded out. (You can add another effect if you want to.) When the body's oppacity of the actual page is 0, the redirect will happen.

On the next page, you could do a fadeIn effect, which might come close to what you expect

HERES A DEMO

---

To fade the body in on the next page, you can use this:

var elements = document.getElementsByTagName('body');
elements[0].style.opacity = 0;
(function fadeIn() {

        var opacity = parseFloat(elements[0].style.opacity);

        if (opacity == 1) return;

        elements[0].style.opacity = opacity + 0.1;
        setTimeout(fadeIn, 100); //<<<<<<<< here you set the speed!
    })();

DEMO FADE IN

Answer 2

 (function(){ document.body.classList.add("fadeout"); window.setTimeout(function(){ window.location.href = "http://www.newlocation.com"; },5000) })() 

 body{ transition:opacity 5000ms; opacity:1; } body.fadeout{ opacity:0; } 

Answer 3

You should put the transition effect in the landing page (example-page.php).

For example, you can hide the whole body with a css rule #wrapper{display:none} , and show it sliding with jquery

 $(document).ready(function () {
      $('#wrapper').slideToggle(1000);