Как сделать загрузку страницы красивой

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

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

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

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

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

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

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

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

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

Разметка HTML

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

Стили CSS

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

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

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

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

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

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

Источник

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

Дата публикации: 2014-10-23

От автора: Данная обучающая статья о том, как воссоздать эффект предзагрузки страницы, увиденный на сайте Fontface Ninja. Мы собираемся использовать CSS анимацию, 3D трансформации и SVG.

Сегодня мы хотим показать вам, как создать очень простой эффект предзагрузки страницы с помощью CSS анимации, SVG и JavaScript. Для сайтов, на которых очень важно, чтобы сначала загрузились все или только часть файлов, такого рода предзагрузочные заставки могут стать креативным способом скрасить утомительное ожидание посетителя сайта. Идея для данной обучающей статьи возникла благодаря красивому эффекту предзагрузки страницы, увиденному на сайте Fontface Ninja. Изначально, на первом плане появляются логотип и элемент загрузки в виде окружности. Когда анимирование загрузчика завершается, т.е. файлы страницы загружены, вся «шапка» поднимается наверх, а элементы страницы тем временем появляются, также с использованием анимации. И последний штрих – это логотип, скользящий наверх и меняющий при этом свой цвет.

В этой обучающей статье мы воссоздадим эффект, увиденный на сайте Fontface Ninja, внеся небольшие поправки, а во втором демо-примере будут использоваться чуточку другие эффекты. Для создания логотипа и элемента загрузки в виде окружности мы будем использовать встроенный SVG, чтобы иметь возможность стилизовать его с помощью CSS. Мы создадим небольшой скрипт для анимирования нашего SVG элемента загрузки. Анимационными эффектами на странице мы будем управлять с помощью классов, которые добавим к основному контейнеру.

Пожалуйста, обратите внимание на то, что мы будем использовать CSS анимацию и CSS 3D трансформации, так что они будут работать только в тех браузерах, которые их поддерживают.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Итак, давайте начнем!

Разметка

Давайте обернем элемент header и основную часть контента в контейнер. Мы должны помнить о том, что нам нужно контролировать все, что происходит с исходным видом страницы и контентом с классами. Поэтому мы будем использовать основной контейнер в качестве контрольного элемента. Мы зададим ему класс и идентификатор (ID) ip-container.

Исходный вид страницы состоит из элемента header, который включает в себя логотип и элемент загрузки. Оба они являются SVG элементами. Причем логотип является более сложным элементом, чем загрузчик, поэтому мы потом приведем координаты его пути, т.к. он действительно очень длинный. Как видите, мы устанавливаем значения для некоторых атрибутов SVG элемента, например, для ширины и высоты, для viewBox и preserveAspectRatio. Для атрибута preserveAspectRatio значение выглядит как xMidYMin meet, что означает, что мы принудительно используем универсальное масштабирование, чтобы графика полностью помещалась в родительский контейнер, была отцентрирована по оси X и поднята наверх. Для того чтобы логотип был доступным, мы добавляем заголовок, описание и необходимый ARIA атрибут – aria-labelledby.

Основному контенту задан класс ip-main. Позже мы будем применять анимацию к его дочерним элементам, заголовку, блоку с контентом и вложенным боксам:

Источник

Эффект предварительной загрузки страницы

Урок по созданию эффекта предварительной загрузки страницы с сайта Fontface Ninja. Мы будем использовать CSS анимацию, 3D трансформации и SVG.

Сегодня мы хотим вам показать, как создать простой эффект предварительной загрузки страницы с помощью CSS анимации, SVG и JavaScript. Для сайтов, на которых чрезвычайно важной является загрузка всех ресурсов, наша наработка может стать прекрасным способом скоротать ожидание посетителя. На создание этого пособия нас вдохновил красивый эффект предварительной загрузки, который мы увидели на сайте Fontface Ninja. Первоначально, лого и индикатор загрузки сайта скользят вверх, и когда загрузчик заканчивает анимацию, то есть все ресурсы загружены, то весь “заголовок” движется вверх, в то время, как элементы страницы отображаются при помощи другого эффекта. Скользящее лого, меняющее цвет, становится вишенкой на нашем торте.

Конечно же мы внесли и свои преобразования в данный эффект, в том числе создали второе демо, где применяем немного другие эффекты. Для лого и индикатора предварительной загрузки сайта мы будем использовать встроенные SVG, с целью преобразования path через CSS. Создадим маленький скрипт для анимации загрузки элемента SVG, контролировать анимацию страницы будем классами, которые добавим к основному контейнеру.

Пожалуйста, обратите внимание на то, что мы будем использовать CSS анимацию и CSS 3D трансформации, поэтому они будут работать должным образом только в тех браузерах, которые их поддерживают.

Давайте поместим заголовок и блок основного содержания в отдельный контейнер. Напомним, что мы хотим контролировать все, что происходит с первоначальным видом и содержимым с помощью классов. Для этого нам пригодится главный контейнер. Зададим ему класс и id равный ip-container.

Основному контейнеру зададим класс ip-main, а позже применим анимацию для его дочерних элементов, заголовков, разделов и внутренних боксов:

Теперь давайте стилизуем всё это дело.

Хотим отметить, что CSS не будет содержать браузерных префиксов, но вы сможете найти полный листинг в исходниках.

Изначально, мы подключаем несколько шрифтов, которые нам понадобятся для замещающего текста и иконок в боксе. Иконки, используемые в демо, взяты из Feather icon set и мы создали иконочный шрифт с помощью Icomoon App. Шрифт замещающего текста – Blokk, очень удобен для создания макетов.

Изначально зададим заголовку 100% ширины и высоты, а позицию выставим как fixed:

Сбрасываем значения внешних отступов заголовка h1:

Логотип и элемент загрузки будем позиционировать абсолютно:

Так же нам не нужно забывать, что логотип должен быть адаптивным. Расположим его по центру экрана:

SVG, которому мы присвоили класс ip-inner, будет отображаться как блочный элемент, центрируем его по горизонтали, используя значение auto для боковых внешних отступов:

SVG лого должно быть активным, но его размер не должен быть слишком большим или маленьким. Выставим максимальную и минимальную ширину:

Так как наш логотип это SVG, можем настроить цвет элемента path:

То же самое касается и загрузчика:

Процентом загрузки будем управлять через JS. Определим перемену stroke-dashoffset :

А сейчас мы стилизуем контент, который находится в контейнере с классом ip-main:

Размер заголовка будет выставлен в единицах vw, что позволит сделать его адаптивным:

Добавим изображение браузера:

И несколько боксов для заполнения пространства:

Каждому боксу зададим иконку:

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

Изначально элементы будут выплывать снизу:

Нам нужно определить стартовую позицию, так как мы хотим передвинуть элементы на их первоначальные места. Функция cubic-bezier придаст анимации плавный эффект. Элемент загрузки должен появляться чуть позже.

Напомним, что прогресс загрузки мы будем анимировать через JS. Поэтому нам нужно определить ещё одно “состояние” на которое мы переключимся, когда загрузка будет завершена. Присвоим контейнеру класс loaded и применим следующую анимацию:

Лого на 100% сдвигается вниз. Цвет элемента SVG изменится во время перехода.

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

Заголовок также должен сдвинуться вверх:

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

Небольшая задержка создаст дополнительный стильный эффект.

Чтобы избежать проблем с прокруткой и появлением пробелов внизу страницы, нам нужно изменить позицию заголовка с fixed на absolute. Для этого можем задать специальный класс элементу body. Данный класс будет использоваться для изменения позиции:

Если JavaScript отключён, отобразим содержимое сразу после анимации. Позицию заголовка выставим как relative и подберём подходящий размер лого:

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

Со стилями закончили.

JAVASCRIPT

JavaScript код будет состоять из двух частей. Мы разделим общий функционал элемента загрузки от всего остального. Давайте назовём этот скрипт pathLoader.js. Тут мы хотим иметь возможность установить stroke-dashoffset чтобы анимировать заполнение элемента path. Первоначально, stroke-dashoffset и stroke-dasharray устанавливаются по длине элемента path (getTotalLength()). Для изменения прогресса загрузки напишем функцию setProgress, куда будем передавать состояние загрузки страницы.

Метод setProgressFn используется для взаимодействия с загрузчиком. В нашем демо загружать нечего, поэтому мы должны симулировать данный эффект, устанавливая величину между 0 и 1 в определённые моменты времени:

Далее создадим скрипт main.js. Инициализируем и кэшируем переменные:

Начинаем анимацию (лого и окно загрузки скользят вверх), присвоив класс loading к главному контейнер. После завершения анимации, начинаем имитировать загрузку. Обратите внимание, что во время отображения этой анимации, страница не может прокручиваться:

После окончания анимации заменяем класс loading классом loaded, который запустит появление заголовка и содержания. После этого, мы добавляем body класс layout-switch и активируем прокрутку:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2014/08/05/page-preloading-effect/
Перевел: Станислав Протасевич
Урок создан: 22 Сентября 2014
Просмотров: 33571
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Источник

Как сделать прелоадер

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

Как сделать прелоадер для landing page

Прежде чем начать делать preloader, нужно немножко уяснить суть того, как браузер загружает страницу. Не буду расписывать весь цикл, так как у самого довольно абстрактное представление, но важно понять, что в целях экономии времени, браузер грузит (отображает) код поэтапно и не дожидается полной загрузки страницы, а в случае подключения js, так вообще прекращает загрузку, пока не выполнит подключаемый файл. Это значит, что загрузка (отображение) остального контента приостанавливается до полной загрузки js файла. В общем, проблем достаточно, давайте теперь попробуем их решить при помощи прелоадера.

Теперь пару слов для понимания того, что мы делаем:

Теперь, сразу после открытия тега body разместим следующий div:

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

Размещайте его где-нибудь после подключения jQuery.

Исходник прелоадера я взял с Codepeen. Вот ссылки на несколько интересных вариантов:

А вы пользуетесь прелоадереми на своих сайтах. Я вот, впервые его использовал. Какие у вас интересные примеры есть?

17 комментариев

Спасибо)
Самое простое объяснение как просто можно сделать Прелоадер_)

Большое спасибо за статью!
Полезный и на уровне изложенный материал!

Молодец!
Доходчиво и просто очень!

А как можно сделать прелоадер например со своим логотипом?

Сделать анимацию своего логотипа, и поставить его в качестве прелоадера.

Добрый день!
Спасибо! В принципе статья помогла.

Что нужно сделать с кодом из Демо 4, чтоб он и на сайте работал, а не только в Codepen, подскажите, пожалуйста?

Pavel, потому, что на кодепене как правило используются всеки предпроцессоры типа SASS и так далее, т.е. код в них немного отличается от стандартных html и js.

У меня тоже при переносе на сайт демо4 не работает, в чем может быть ошибка

Добрый день!
А куда в данном случае вставлять содержимое страницы?

Дмирий, здравствуйте не понял вопроса. В содержимое страницы нужно вставлять прелоадер, а не наоборот, в статье же написано вроде, что вставляем после body

dimadv7, добрый день, я вроде так и делаю, в head вношу скрипт и стили, а сразу после body идет код

а далее собственно содержимое страницы. Если это важно — содержимое есть фрейм с большим тяжелым документом pdf, который открывается несколько секунд. Как раз на время открытия и нужен прелоадер. Т.е. далее после выше указанного кода в body идет

В итоге при открытии страницы исправно запускается прелоадер, далее открывается фрейм с документом, а прелоадер так и остается поверх всего.
Что не так делаю?

без фрейма прелоадер так и крутиться, никуда не исчезает. Может, дело в скрипте? Пробовал до скрипта подключать jQuery, не помогает.

А такой лоадер, только перед загрузкой картинки, может кто посоветовать? Без плагинов, на JS.

Источник