Эффект загрузки страницы — создание эффекта при загрузке страницы

Юрий Немец

19.11.2014

Эффект загрузки страницы — создание эффекта при загрузке страницы

Долго грузиться сайт? И вы не хотите чтобы человек видел как сайт загружается по частям, а хотите чтобы он видел только полностью загруженный сайт? Тогда этот урок для вас. То есть посетитель заходит на сайт и видит индикатор загрузки, по истечении которого появляется сайт с красивым переходом. Может для блогов или порталов использование такого эффекта будет только мешать посетителям, то на продающих страницах он будет весьма кстати.

Скачать (необходимо будет подождать 10 секунд) и посмотреть пример вы можете по ссылкам ниже:

Смотреть примерСкачать

Раньше я писал об индикаторах загрузки, поэтому рекомендую посмотреть еще их:

Собственный индикатор загрузки страницы

Ну и вот еще несколько статей о том, что можно сделать с помощью jQuery:

Эффект при загрузке страницы

В чем, собственно, суть: когда пользователь попадает на сайт, он видит перед собой серый фон, на котором изображен логотип сайта. Также он видит индикатора загрузки, который постепенно заполняется. Для индикатора загрузки используем SVG. После заполнения с помощью красивого эффекта появляется уже загруженная страница сайта, а область с логотипом плавно исчезает.

Вот страница после исчезновения индикатора загрузки:

Разметка HTML

У нас есть блок <header> </header>, с серым фоном, логотипом сайта и индикатором загрузки. То есть то, что пользователь видит как зашел на сайт.

Далее идет блок <div> с классом ip-main, где находится основной контент страницы.

А сейчас сам код:

<div id="ip-container" class="ip-container">
    <header class="ip-header">
        <!-- лого -->
        <div class="ip-loader">
            <svg class="ip-inner" width="60px" height="60px" viewBox="0 0 80 80">
                <path class="ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
                <path id="ip-loader-circle" class="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
            </svg>
        </div>
    </header>
    <div class="ip-main">
        <!-- основной контент -->
    </div>
</div>

А сейчас давайте это всё красиво оформим!

Стили CSS

В HTML разметке ничего сложного нет. Переходим к визуальному оформлению. В зависимости от того, какое демо вам понравилось больше, вам необходимо подключить между тегами <head> </head> соответствующий файл стилей (который находится в папке css).

effect1.css	если вам понравилось первое демо
effect2.css	если вам понравилось второе демо

Ну а подключается всё это дело как обычно (если вам нравится первый эффект):

1	<link rel="stylesheet" type="text/css" href="css/effect1.css" />

Или так (если больше понравился второй):

1	<link rel="stylesheet" type="text/css" href="css/effect2.css" />

В начале каждого из этих файлов есть вот такие свойства:

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'Blokk';
    src: url('../fonts/blokk/BLOKKRegular.eot');
    src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/blokk/BLOKKRegular.woff') format('woff'),
         url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
}
 
@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'feather';
    src:url('../fonts/feather/feather.eot?-9jv4cc');
    src:url('../fonts/feather/feather.eot?#iefix-9jv4cc') format('embedded-opentype'),
        url('../fonts/feather/feather.woff?-9jv4cc') format('woff'),
        url('../fonts/feather/feather.ttf?-9jv4cc') format('truetype'),
        url('../fonts/feather/feather.svg?-9jv4cc#feather') format('svg');
}

Здесь вам необходимо указать пути к папке fonts, чтобы в дальнейшем работал индикатор загрузки.

Следующим свойством мы зафиксируем блок, в котором находится индикатор загрузки:

.ip-header {
    position: fixed; /* фиксированное позиционирование */
    top: 0; /* указывая 0 (ноль), мы "прижимаем" к верху этот блок */
    z-index: 100; /* позиционирование по оси Z */
    min-height: 480px; /* минимальная высота блока */
    width: 100%; /* ширина блока на всю ширину экрана */
    height: 100%; /* высота блока на всю высоту экрана */
    background: #f1f1f1; /* фоновый цвет */
}

Свойств действительно много, не буду их все описывать. Вам лишь нужно подключить файл стилей соответствующего эффекта. Вот что получается в результате:

Функциональная часть jQuery

Чтобы всё это заработало и закрутилось нужна некая «магия» 🙂 . Но к ней мы сегодня прибегать не будем, а воспользуемся лишь несколькими скриптами (classie.js, pathLoader.js и main.js), которые можно найти в папке js.

Скрипты подключаем перед закрывающим тегом </body>:

1
2
3

<script src="js/classie.js"></script>
<script src="js/pathLoader.js"></script>
<script src="js/main.js"></script>

Вывод

Сейчас у нас всё красиво работает и страница появляется по истечению таймера в индикаторе загрузки. Вы увидели 2 эффекта загрузки страницы и можете выбирать любой свой вкус. На продающей странице, где много изображений, видео, и я не говорю о количестве скриптов, данный способ показать посетителю заранее подгруженный сайт — очень подойдет.

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Категории: jQuery