Пример сплеш-страницы

by Leviev

HTML

<div id="splash">
    <span id="timer"></span>
</div>

CSS

* {
  margin:0;
  padding:0;
}
#splash {
  height:100%;
  min-height:100%;
  width:100%;
  position:fixed;
  background:#fff url('http://www.astropak.com/downloads/wallpapers/AP_SPLASH.jpg') no-repeat;
  background-position: 0% 0%;
  overflow:hidden;
}
#timer {
  display:block;
  margin:25% auto;
  background:#fff;
  font-size:24px;
}

JavaScript

var timerStep = 5;
var bgMove = 0;

window.onload = function () {
    window.timer = document.getElementById('timer');
    window.splashDiv = document.getElementById('splash');
    timer.appendChild(document.createTextNode('0:00:0' + timerStep.toString()));
    splash();
}

function splash() {
    if(timerStep > 0) {
        timer.firstChild.nodeValue = '0:00:0' + timerStep.toString();
        timerStep--;
        setTimeout('splash()',1000);
    } else {
        splashDiv.removeChild(timer);
        moveSplash();
    }
}

function moveSplash() {
    if(bgMove < 100) {
        splashDiv.style.backgroundPosition = '-' + bgMove + '% 0%';
        bgMove++;
        setTimeout('moveSplash()',50);
    } else {
        alert(splashDiv.style.backgroundPosition);
        splashDiv.style.display = 'none';
        splashDiv.parentNode.removeChild(splashDiv);
    }
}