Ноябрь 4, 2019 Запись была обновлена
Эффект загрузки страницы — создание эффекта при загрузке страницы
Долго грузиться сайт? И вы не хотите чтобы человек видел как сайт загружается по частям, а хотите чтобы он видел только полностью загруженный сайт? Тогда этот урок для вас. То есть посетитель заходит на сайт и видит индикатор загрузки, по истечении которого появляется сайт с красивым переходом. Может для блогов или порталов использование такого эффекта будет только мешать посетителям, то на продающих страницах он будет весьма кстати.
Скачать (необходимо будет подождать 10 секунд) и посмотреть пример вы можете по ссылкам ниже:
Смотреть примерСкачать
Раньше я писал об индикаторах загрузки, поэтому рекомендую посмотреть еще их:
Ну и вот еще несколько статей о том, что можно сделать с помощью jQuery:
- Красивый выпадающий список для сайта
- Полностью анимированное меню на Javascript
- Интерактивный фон для сайта + видео
- Плавное перемещение по странице 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 эффекта загрузки страницы и можете выбирать любой свой вкус. На продающей странице, где много изображений, видео, и я не говорю о количестве скриптов, данный способ показать посетителю заранее подгруженный сайт — очень подойдет.
Успехов!
Источник: Оригинал
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Как я могу поменять это правило после загрузки страницы при каком-либо событии?
Какое правило?
не как
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? Мне бы хотелось чтоб они как раз выводились после загрузки страницы, а не до.
Добрый день. У меня вопрос, можно ли это организовать без header? Уже почти полностью сверстанный сайт, header уже оформлен. К примеру в content это поместить??
Здравствуйте, Артур!
Да, конечно, можно так сделать.