6 czerwca 2015

Jak umieścić własną animację wczytywania strony?

Wiele stron i blogów stosuje własną animację wczytywania. Jest to ruchoma grafika, która pojawia się podczas ładowania strony. Może to być obracające się kółeczko lub bardziej zaawansowana animacja w formacie .gif. Po przestudiowaniu poniższego poradnika, będziesz potrafił samodzielnie zainstalować taką u siebie. Cały proces omówię pod kątem Bloggera, gdyż to właśnie z niego korzysta najwięcej początkujących webmasterów. Jeśli chcesz zastosować animację na stronie www, jedyną zmianą jest taka, że arkusz stylu CSS powinieneś umieścić między znacznikami
<style>...</style>
lub w zewnętrznym dokumencie, a dodając odniesienie do niego w HTMLu strony używając linku
<link rel="stylesheet" type="text/css" href="arkusz_stylu.css">

Demo

Instalacja na Bloggerze

W panelu administracyjnym na Bloggerze wejdź w menu Szablon => Edytuj kod HTML.
Kliknij kursorem w edytor wyszukiwarki i wciśnij kombinację klawiszy Ctrl + F. Pojawi się wyszukiwarka. Wpisz wyszukiwany znacznik i wciśnij Enter.

Umieszczanie arkusza stylu

Nad
]]></b:skin>
wklej:
/* Preloader
---------------------------------------------- */
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 99999;
  background-image: url(http://4.bp.blogspot.com/-hSJmTjrpR9M/VVtAF2im-xI/AAAAAAAALPY/xai22xOtiLo/s1600/Nicolas.gif);
  background-position: center center;
  background-repeat: no-repeat;
}
Link zaznaczony na pomarańczowo możesz zamienić na własny link do obrazka animacji ładowania.

Umieszczanie biblioteki jQuery

Nad
</head>
wklej:
<script src="//code.jquery.com/jquery-1.11.3.min.js"/>

Umieszczanie kodu HTML

Nad
<body>
wklej:
<div id='preloader'></div>

Umieszczanie skryptu

Nad
</body>
wklej:
<script>
//<![CDATA[
jQuery(window).on('load', function() {
jQuery('#preloader').fadeOut(300);
});
//]]>
</script>
Na koniec Zapisz szablon.

Podsumowanie

Efektowna animacja z pewnością uatrakcyjni wygląd twojego bloga i umili czytelnikom oczekiwanie na wczytywanie strony, dlatego warto mieć ją u siebie.
Designed by Blokotek. All rights reserved.