От автора: Простой шаблон, в котором используется CSS свойство background-attachment для создания эффекта фиксированного фона. Иногда вам не нужно писать какой-то ненормальный JavaScript код, чтобы создать креативные и хорошо выглядящие эффекты. Сегодня в центре нашего внимания всего одно CSS свойство — background-attachment. Вы можете зафиксировать фон в рамках области просмотра (background-attachment: fixed;).
Суть нового трюка заключается в том, что у нас есть один и тот же элемент (в данном случае телефон), который расположен в одном и том же месте для всех фоновых изображений. Таким образом, во время прокрутки страницы двигаются все элементы, за исключением телефона. Все, что вам необходимо, – это разные изображения одинакового размера и один общий элемент, расположенный в одном и том же месте.
Создание структуры
HTML структура является довольно обычной: каждый раздел содержит элемент с классом .content, в котором находятся заголовок с абзацем. Классы .img-1, .img-2 и т.д. используются, чтобы задавать разные фоновые изображения через CSS. Элемент с классом .cd-vertical-nav представляет собой стрелочную навигацию (которая видна только на больших экранах). Атрибуты data используются, чтобы в jQuery можно было определить разделы/элементы слайдера.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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.
|
1 2 3 4 5 6 7 8 |
.cd-fixed-background .cd-content::after { /* изображение телефона на маленьких экранах */ content: ''; display: block; width: 100%; padding: 60% 0; margin: 2em auto 0; } |
Помимо этого, поскольку мы используем фоновые изображения, у нас нет 100%-го контроля над тем, где будет отображен зафиксированный элемент (в данном случае телефон). С этим тяжело смириться, если вы помешаны на перфекционизме, но я пока не могу найти решение этого вопроса. Вот весь код, который вам понадобится для достижения заявленного эффекта:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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() используются для перехода к следующему/предыдущему разделу.
Автор: Sebastiano Guerriero
Источник: //codyhouse.co/
Редакция: Команда webformyself.
