javascript fade between pages

Question

first of all i'm pretty new with JS. I'm buillding a website and it has a intro. This intro animation have to be placed in a different page and after it ends then the next webpage will be automatically loaded.

<body onload="setTimeout(
function(){
    window.location.href = 'file:///C:/Users/skatto/Desktop/art%20contest/art_contest_page.html';
}, 32000 )">

this is the script i'm using on my html file to automatically load the next page, but it's pretty 'sharp' and rough, how could I add a fade animation? To make it smoother

please provide your code and tell us what you have tried so far — Pixelomo, Dec 07 '16 at 11:09
take a look at this question http://stackoverflow.com/questions/6805482/css3-transition-animation-on-load — Yaser, Dec 07 '16 at 11:12
you can't really fade a pageload. You can either make it a one-page application or fade in a new website onLoad... — noa-dev, Dec 07 '16 at 11:12
@noa-dev: Actually most modern browsers allow a fadein on load, but that is not the point here. — iCollect.it Ltd, Dec 07 '16 at 11:16

score 0 · Answer 1 · answered Dec 07 '16 at 11:21

A simple CSS can do this. why use scripts? Add the animation fadeIn to any body of page you want to fade in before load.

body {
  animation: fadeIn 0.5s linear;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div>
  Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>Something
  <br/>
</div>

score 0 · Answer 2 · answered Dec 07 '16 at 11:36

Try like this

on page 1:

<a href="otherPage.html" class="transition">LINK</a>

$(document).ready(function() {
    $("body").css("display", "none");

    $("body").fadeIn(2000);

    $("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage);      
    });

    function redirectPage() {
        window.location = linkLocation;
    }
});

javascript fade between pages

2 Answers2