Вы строите одностраничный сайт (SPA) и беспокоитесь о времени загрузки страницы? Это правильно, поскольку даже сайты из одной страницы могут быть громоздкими, несмотря на оптимизацию.
В этом уроке мы добавим CSS3-переход к уже созданному прелоадеру на CSS3. Как только содержимое страницы будет загружено, мы анимируем красивый переход экрана предзагрузки отдельно от области просмотра.
Вот, что вы узнаете:
- Как использовать CSS3-свойство transition
- Как анимировать полноэкранную предзагрузку
- Как объединить CSS3 с JavaScript
Откройте исходные файлы и выполните следующие действия:
1. Добавьте HTML и CSS для индикатора загрузки
В нашем файле index.html уже есть CSS3-прелоадер #loader на белом фоне, но мы хотим создать больший контраст между экраном предварительной загрузки и контентом.
Создадим две половинки (левую и правую) экрана предварительной загрузки внутри #loader-wrapper.
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
Теперь мы добавим CSS-стили в css/main.css сразу после описывающих вращение @keyframes:
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #222222;
z-index: 1000;
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
Мы получили темный, полноэкранный оверлей, но, к сожалению, он также затрагивает наш вращающийся #loader и затрудняет чтение заголовка страницы.
Тонкости CSS
Нам нужно будет настроить z-index для #loader, чтобы вывести его над темным наложением и изменить цвет заголовка на светло-серый.
Найдите #loader в таблице стилей (строка 43) и добавьте следующий стиль:
#loader {
/* делаем выше, чем .loader-section с z-index=1000 */
z-index: 1001;
}
Также напишите CSS-свойство для h1 чуть ниже нашего значения по умолчанию для p (строка 34).
h1 {
color: #EEEEEE;
}
Круто, теперь намного лучше.
2. Добавьте и стилизуйте контент на странице
Теперь давайте добавим контент на страницу, чтобы у нас было что показать. Вставьте новый div с id #content ниже закрывающего тега #loader-wrapper.
HTML
<div id="content">
<h2>Это заголовок страницы</h2>
<p>Надоевший всем Lorem ipsum dolor sit amet.</p>
</div>
Как видите, это содержимое скрыто за нашим экраном предварительной загрузки, так что давайте ненадолго закомментируем #loader-wrapper .loader-section и стилизуем наш контент. Добавьте следующее в main.css:
#content {
margin: 0 auto;
padding-bottom: 50px;
width: 80%;
max-width: 978px;
}
Здесь мы центрируем контейнер контента по горизонтали и устанавливаем width и padding-bottom.
А теперь самое интересное – анимация двух предзагружающихся разделов экрана вне области видимости.
3. Добавляем переход (transition) к прелоадеру
Мы перемещаем обе части с помощью CSS3-преобразований когда body получает класс .loaded. Добавьте следующий код в main.css.
/* Загружено */
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(-100%); /* IE 9 */
transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(100%); /* IE 9 */
transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */
}
Одновременно мы скрываем прелоадер:
.loaded #loader {
opacity: 0;
}
Изменение #loader непрозрачности opacity до 0 сделает содержимое #content недоступным, потому что контейнер #loader находится поверх нашего контента.
Мы должны добавить visibility: hidden; в #loader-wrapper.
.loaded #loader-wrapper {
visibility: hidden;
}
Чтобы просмотреть наши стили, нам нужно будет вручную добавить класс .loaded к элементу body.
В Google Chrome щелкните правой кнопкой мыши в любом месте страницы и выберите пункт Исследовать элемент, что вызовет инструменты разработчика. Щелкните правой кнопкой мыши на элементе body и добавьте новый атрибут class="loaded". Нажмите на на клавишу Enter и вы увидите, что наш прелоадер исчез. Отлично, но подождите, где обещанные CSS3-переходы? Давайте сделаем их в следующем шаге.
4. Определяем порядок анимации
Порядок нашей анимации должен быть следующим:
- Скрываем
#preloader
- Анимация левой и правой сторон оверлея
- Анимируем
#loader-wrapper
Сначала скроем прелоадер, добавив CSS3-переход в #loader.
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
Затем мы будем анимировать обе стороны оверлея с небольшой задержкой в 0,3 секунды.
.loaded #loader-wrapper .loader-section.section-right,
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transition: all 0.3s 0.3s ease-out;
transition: all 0.3s 0.3s ease-out;
}
Первое число 0.3s определяет длительность анимации, а вторая - 0.3s задержку начала анимации. И, наконец, мы будем анимировать #loader-wrapper, используя transform: translateY(-100%).
.loaded #loader-wrapper {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 0.6s ease-out;
transition: all 0.3s 0.6s ease-out;
}
Как видите, здесь мы устанавливаем задержку в 0.6s, поскольку общая продолжительность наших первых двух анимаций (0.3 + 0.3 = 0.6).
Другой способ быстро добавить класс .loaded тегу body - это запустить jQuery-код в консоли браузера:
$('body').toggleClass('loaded');
Это приведет к переключению между нашим контентом и экраном прелоадера, оживляющим экран. Круто, да?
Тонкая настройка
Чтобы получить более плавную анимацию для левого и правого оверлеев, мы можем изменить ослабление с ease-out на cubic-bezier и выставляем время 0,7с.
.loaded #loader-wrapper .loader-section.section-right,
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
Изменение длительности перехода левой и правой секций также означает, что мы должны увеличить задержку анимации .loaded #loader-wrapper на одну секунду.
.loaded #loader-wrapper {
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
Поработаем с jQuery
Поскольку на нашей странице недостаточно контента, мы будем подделывать загрузку контента простым jQuery. Вы можете использовать jQuery-плагин imagesloaded или PxLoader в вашем проекте, но мы сделаем проще. Включите следующий код в файл js/main.js.
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
}, 3000);
});
Это приведет к тому, что к body будет добавлен класс .loaded через три секунды, а также изменен цвет нашего h1 на темно серый.
Нет JavaScript? Не проблема
Чтобы гарантировать, что наш контент по-прежнему доступен даже без включения JavaScript, мы также можем включить резервный .no-js.
.no-js #loader-wrapper {
display: none;
}
.no-js h1 {
color: #222222;
}
Вы сделали это: самый красивый анимированный экран предварительной загрузки с использованием CSS3 анимаций и переходов. Отлично сработано!