Эффект фиксированного фона на CSS

Эффект фиксированного фона на 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() используются для перехода к следующему/предыдущему разделу.

Автор: Sebastiano Guerriero

Источник: http://codyhouse.co/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree