Лого SiteHere.ru

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

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

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

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

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

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

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

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

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

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

После индикатора загрузки

Разметка HTML

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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" />

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@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, чтобы в дальнейшем работал индикатор загрузки.

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

1
2
3
4
5
6
7
8
9
.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 эффекта загрузки страницы и можете выбирать любой свой вкус. На продающей странице, где много изображений, видео, и я не говорю о количестве скриптов, данный способ показать посетителю заранее подгруженный сайт — очень подойдет.

Успехов!

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

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

23 комментария к записи
  • orenkomp.ru

    Как я могу поменять это правило после загрузки страницы при каком-либо событии?

     
  • Сергей

    Cfk.n!E меня почему-то блоки и разметка страницы слетают((((((((((пичалько

     
  • Юрий

    Сергей, когда у Вас блоки и разметка слетает?

     
  • Сергей

    Слетали,да.Я уже всё исправил.Спасибо за отклик

     
  • Иван

    Привет, скажите, как сделать, что бы после загрузки, логотип исчезал (display:none), а не переносился на мой сайт ?

    Заранее спасибо! )

     
    • Юрий

      Для этого используйте jQuery. Сначала отследите полную загрузку сайта (это можно сделать с помощью jQuery) и затем пропишите действия исчезнования логотипа.

       
  • Дмитрий

    Здравствуйте, Юрий!

    В каких случаях шапка страницы грузится быстро, а остальной контент приходится ждать? Помогите с решением пж

    После нового года такая проблема сначала была на мобильных устройствах, а теперь стал замечать и на ПК. Хотя скорость загрузки у страницы на мобильных 81 на ПК 87.

    Шапка грузится в доли секунды и дальше страница не скролится, приходится ждать секунды 8 если не больше. Может сталкивались с подобным?

     
    • Юрий Немец

      Здравствуйте, Дмитрий!

      Возможно, это из-за того шаблона который используется. Если у Вас в самом верху есть слайдер, то, возможно, именно он тормозит загрузку страницы. Его можно либо оптимизировать, либо просто заменить другим элементом.

      Также это возможно из-за длительного ожидания ответа от базы данных. Хотя в Вашем случае скорее первое.

       
  • Дмитрий

    Слайдера нет. В метрике увидел на некоторых страницах ответ от DNS >30000

    База данных — хостинг?

     
    • Юрий Немец

      Дмитрий, для эксперимента просто попробуйте сменить шаблон на любой стандартный и проверьте. Если проблема исчезнет, значит искать ее нужно в шаблоне.

       
  • Дмитрий

    Результат не изменился. Значит база данных хостинг?

     
    • Юрий Немец

      Попробуйте отключить все плагины и затем поочередно включать и смотреть на результат. Возможно какой-то плагин грузит. Тогда можно будет его заменить на другой или просто отказаться от него.

       
  • Данил

    Здравствуйте, сделал все как в цитате, но нечего не работает!

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Главная</title>
    <link rel="stylesheet" type="text/css" href="css/effect1.css" />
    <link href="css/demo.css" rel="stylesheet" type="text/css">
    <link href="css/normalize.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <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>
    <script src="js/classie.js"></script>
    <script src="js/pathLoader.js"></script>
    <script src="js/main.js"></script>
    </body>

    </html>

     

     
  • Алексей

    Здравствуйте. Можно таким способом грузить только одну страницу, которая долга на сайте грузиться?

     
  • Дмитрий

    А если у меня в header есть еще блоки. Как их скрыть при загрузке и показать после загрузки всего сайта?
    Сейчас идет в точности наоборот. При загрузке показывается, а после загрузки пропадают

     
  • Дмитрий

    А как быть, если есть вложенные блоки в header? Мне бы хотелось чтоб они как раз выводились после загрузки страницы, а не до.

     
  • Arthur

    Добрый день. У меня вопрос, можно ли это организовать без header? Уже почти полностью сверстанный сайт, header уже оформлен. К примеру в content это поместить??

     
    • Юрий Немец

      Здравствуйте, Артур!
      Да, конечно, можно так сделать.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *