Простой шаблон, который использует свойство CSS фона для добавления фиксированного фонового эффекта.
Иногда вам не нужен сумасшедший код JavaScript, чтобы придумывать креативные и приятные эффекты. Сегодняшний сниппет - это все о одном свойстве CSS: background-attachment
. Вы можете установить фон, который будет исправлен в окне просмотра background-attachment: fixed;
Новый трюк состоит в том, что один и тот же элемент (в данном случае телефон) находится в том же положении на всех фоновых изображениях, так что при прокрутке все перемещается, но на телефоне.
Единственное, что вам нужно, это разные изображения с одинаковым размером и общим элементом в том же положении.
Создание структуры
Структура HTML довольно проста: каждый раздел содержит элемент .content с названием и абзацем. Классы .img-1, .img-2 и т. Д. Используются для настройки различных фоновых изображений в CSS. .cd-vertical-nav
- это навигация по стрелкам (отображается только на больших устройствах). Типы данных были использованы для идентификации в jQuery разделов / элементов слайдера.
<section class="cd-fixed-background img-1" data-type="slider-item">
<div class="cd-content">
<h2>Title here</h2>
<p>Lorem ..... 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 не любят привязывать фон: исправлено; Поэтому на небольших устройствах фиксированный фоновый эффект не будет виден. Также на небольших устройствах мы пока не используем фоновые изображения CSS, но мы добавляем меньшие фотографии телефонов как ::after
элемента .cd-content
.
.cd-fixed-background .cd-content::after {
/* phone image on small devices */
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 для реализации базового слайдера для навигации по различным разделам (предыдущие / следующие стрелки и клавиатура). При прокрутке окна мы обновляем видимость стрелок (функция checkNavigation ()
) и обнаруживаем видимый в окне просмотра раздел (класс .is-visible
назначается с помощью функции checkVisibleSection ()
). Функции nextSection ()
и prevSection ()
используются для перехода к следующему / предыдущему разделу.