Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

preloader перед загрузкой страница сайта

preloader перед загрузкой страница сайта

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

Preloaderэто небольшая анимация на экране, которая сразу исчезнет как весь сайт загрузится для корректного отображения на экране монитора.

Зайдем в index.html и перейдем в самый верх, под тегом body размещаем див с классом preloader, у которого будет внутренний класс puls.

Размещаем в одну строку в html.

Переходим в main.sass для стилизации preloader.

В начале документа можно разместить стили preloader.

Делаем position: fixed фиксированую позицию поверх всего контента и отступы l0+t0+b0+r0 нажимаем клавишу tab.

z-index: 30 также сделаем побольше, чтобы preloader был над всеми элементами.

Сделаем background-color: #555, цвет серым в примере, цвет фона для preloader задается приближенный к цветам сайта, чтобы не был контрастным.

Сделаем дочерним класс puls, у класса будет position: relative, слева left: 50% и высота экрана top: 50vh, весь экран занимает 100vh.

Весь прелоадер будет 80 пикселей, поэтому сделаем margin-left: -40px и margin-top: -40px, этим подвигаем выше и левее на сорок пикселей.

Напишем миксин непрозрачности прелоадера.

Назовем миксин opacity  и в него вложим переменную $opacity.

Затем возьмем переменную и разделим на 100.

Добавим фильтр со значением filter: alpha (opacity=$opacity).

Оформим preloader.

Добавим дочернему классу puls элементы &::before, &::after, контент будет пустым.

У нас будут вращаться кружки шириной пять пикселов border: 5px solid #c9c9c9.

Ширина width: 80px и высота height: 80px.

Большое закругление делаем border-radius: 300px.

Абсолютное позиционирование position: absolute.

Смотрим в браузер.

стилизация css preloader

Добавим анимацию для preloader.

У &::beforeи &::after будет разная анимация для это сделаем два @keyframes.

  1. Вначале установим @keyframes для before круга puls-out. Анимацию начинаем с 0%, дальше мы включим @include миксин @mixin opacity со следующими значениями, вначале будет сто. Копируем и делаем 50%, на половине анимации будет прозрачность 50. На 100 процентах анимации будет прозрачность ноль.
  2. Сделаем puls-in для after круга @keyframes. Сделаем @include для ноль процентов прозрачность 0 и transform: scale (0) будем трансформировать круг, у 100 процентов прозрачность 100 и transform: scale (1), чтобы получилась пульсация.

Теперь два keyframes применим в анимацию.

  1. Пишем для класса &::before свойство animation: puls-out .8s ease-in infinite, чтобы подольше была анимация.
  2. Копируем верхнюю строку и меняем на &::after свойство animation: puls-in .8s linear infinite. Изменим тип анимации на линейную linear.

Теперь проверим в браузере и увидим анимацию, которая получилась. Будет анимация на подобие такой.

Код в main.sass

Настройки preloader в common.js.

Прелоадер будет пульсировать бесконечно, чтобы он был только при загрузки напишем внизу common.js новую функцию для окна window.

При загрузки on (load) мы выполним функцию function, в которой возьмем селектор $(.preloader) установим задержку в одну секунду delay (1000), тут значение в миллисекундах.

Плавно уберем со скоростью fadeOut (slow).

Пока загружается страница есть прелоадер, когда загрузилась он плавно пропадает.

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

Комментариев нет

Комментарии:

Комментарии запрещены