---

Soft fullscreen background fading

Features

  • Smooth fading between different images in full page background
  • tunable resize policy : original size, fit to screen (keep ratio), fullscreen
  • tunable speed
  • tunable steps
  • tunable pause between fades

Test it!

Parameters

fadeDelay (ms) :
fadeSpeed (%) :
fadePause (ms) :
fadeResizePolicy :

Installation

1/ Save fadeFullscreen.js, edit 5 first lines to change speed and images names.

2/ Put following lines in your css :

#ci1 { position:absolute; text-align:center; margin-top:0px; z-index:-20; visibility:visible; overflow:hidden; }
#ci2 { position:absolute; text-align:center; margin-top:0px; z-index:-10; visibility:hidden; overflow:hidden; }

3/ Put this line just after the <body> section of your html page :

<script type="text/javascript" src="fadeFullscreen.js"></script>

That's it!