tanie strony www bydgoszcz tanie strony www bydgoszcz tanie strony www bydgoszcz
Tanie Strony Internetowe Bydgoszcz » Firmowe Strony WWW Bydgoszcz
www.at.bydgoszcz.pl
Preloader, strona dłużej się ładuje... zabaw internautę!

Preloader, strona dłużej się ładuje... zabaw internautę w tym czasie!

W dzisiejszych czasach oraz dostępnych łączach internetowych... raczej zbędne, ale na pewno zaciekawi :) Zastosować można np przy wczytywaniu jakiegoś "naprawdę sporego" zdjęcia, lub całej strony.

Pre-loader podczas wczytywania strony:

Wstawiamy w HTML'u zaraz po BODY dwie warstwy: 

<div id="preloader"><div id="loader"></div></div>

 Style CSS3:

#preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #EEE; 
   z-index: 10000;
   -webkit-animation-name: prehide;
   animation-name: prehide;
   -webkit-animation-delay: 2s;
   animation-delay: 2s;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes prehide {
    from {opacity: 1;}
    to {opacity:0;display:none;
        -webkit-animation-play-state:paused;}
}
@keyframes prehide {
    from {opacity: 1;}
    to {opacity:0;display:none;
        -webkit-animation-play-state:paused;}
}
#loader {
   width: 400px;
   height: 300px;
   position: absolute;
   left: 50%; 
   top: 50%;
   margin: -200px 0 0 -150px;
   background: transparent url('loader.gif') 0 0 no-repeat;
}

Kod JQuery:

$('body').css({'overflow':'hidden'});
$(window).load(function(){
$('#loader').fadeOut();
$('#preloader').delay(350).fadeOut(function(){
$('body').delay(350).css({'overflow':'visible'});
});
});

Kolor tła:#635684, Plik: 21,3kb

Kolor tła:#9fe2dd, Plik: 69,4kb

Kolor tła:#d1e5f9, Plik: 34,6kb

Kolor tła:#ffdf01, Plik: 54,0kb

Kolor tła:#abdb89, Plik: 100kb

Kolor tła:#ebdae5, Plik: 36,4kb

 

 ↻ do góry  « powrót 
Copyright © 2017-2019 www.at.bydgoszcz.pl

Tanie Strony Internetowe Bydgoszcz » Firmowe Strony WWW Bydgoszcz

Strony Internetowe    Pytania i odpowiedzi    Szablony tanich stron    Zamów stronę WWW
projekty stron strony internetowe bydgoszcz
g+