SmurfEkko SmurfEkko - 4 months ago 12
PHP Question

Transition effect on page load with url

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.

mmm mmm
Answer

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