Эффект фиксированного фона на CSS
Простой шаблон, в котором используется CSS свойство background-attachment для создания эффекта фиксированного фона. Иногда вам не нужно писать какой-то ненормальный JavaScript код, чтобы создать креативные и хорошо выглядящие эффекты. Сегодня в центре нашего внимания всего одно CSS свойство — background-attachment. Вы можете зафиксировать фон в рамках области просмотра (background-attachment: fixed;).
Суть нового трюка заключается в том, что у нас есть один и тот же элемент (в данном случае телефон), который расположен в одном и том же месте для всех фоновых изображений. Таким образом, во время прокрутки страницы двигаются все элементы, за исключением телефона. Все, что вам необходимо, – это разные изображения одинакового размера и один общий элемент, расположенный в одном и том же месте.
Создание структуры
HTML структура является довольно обычной: каждый раздел содержит элемент с классом .content, в котором находятся заголовок с абзацем. Классы .img-1, .img-2 и т.д. используются, чтобы задавать разные фоновые изображения через CSS. Элемент с классом .cd-vertical-nav представляет собой стрелочную навигацию (которая видна только на больших экранах). Атрибуты data используются, чтобы в jQuery можно было определить разделы/элементы слайдера.
<section class="cd-fixed-background img-1" data-type="slider-item"> <div class="cd-content"> <h2>Title here</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p> </div> </section> <section class="cd-fixed-background img-2" data-type="slider-item"> <!-- ... --> </section> <nav> <ul class="cd-vertical-nav"> <li><a href="#0" class="cd-prev inactive">Next</a></li> <li><a href="#0" class="cd-next">Prev</a></li> </ul> <!-- cd-vertical-nav --> </nav>
Добавление стилей
Несколько важных моментов, о которых стоит помнить: устройства на iOS не любят свойство background-attachment: fixed; Поэтому на устройствах с маленьким экраном эффект с фиксированным фоном не будет виден. А также на таких устройствах мы не используем фоновые изображения, но вставляем небольшие фотографии телефонов с помощью псевдо-элементов ::after у элемента .cd-content.
.cd-fixed-background .cd-content::after {
/* изображение телефона на маленьких экранах */
content: '';
display: block;
width: 100%;
padding: 60% 0;
margin: 2em auto 0;
}
Помимо этого, поскольку мы используем фоновые изображения, у нас нет 100%-го контроля над тем, где будет отображен зафиксированный элемент (в данном случае телефон). С этим тяжело смириться, если вы помешаны на перфекционизме, но я пока не могу найти решение этого вопроса. Вот весь код, который вам понадобится для достижения заявленного эффекта:
html, body {
height: 100%;
}
.cd-fixed-background {
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.cd-fixed-background.img-1 {
background-image: url("../img/img-1.jpg");
}
.cd-fixed-background.img-2 {
background-image: url("../img/img-2.jpg");
}
.cd-fixed-background.img-3 {
background-image: url("../img/img-3.jpg");
}
Мы использовали jQuery для реализации базового функционала слайдера, т.е. чтобы можно было перемещаться между разделами (стрелки вверх/вниз на клавиатуре). Когда происходит событие scroll у объекта window, мы обновляем видимость стрелок (функция checkNavigation()) и определяем, какой раздел является видимым (находится в области просмотра) с помощью функции checkVisibleSection(), которая добавляет класс .is-visible для нужного раздела. Функции nextSection() и prevSection() используются для перехода к следующему/предыдущему разделу.
