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

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

От автора: Простой шаблон, в котором используется CSS свойство background-attachment для создания эффекта фиксированного фона. Иногда вам не нужно писать какой-то ненормальный JavaScript код, чтобы создать креативные и хорошо выглядящие эффекты. Сегодня в центре нашего внимания всего одно CSS свойство — background-attachment. Вы можете зафиксировать фон в рамках области просмотра (background-attachment: fixed;).

скачать исходникидемо

Суть нового трюка заключается в том, что у нас есть один и тот же элемент (в данном случае телефон), который расположен в одном и том же месте для всех фоновых изображений. Таким образом, во время прокрутки страницы двигаются все элементы, за исключением телефона. Все, что вам необходимо, – это разные изображения одинакового размера и один общий элемент, расположенный в одном и том же месте.

Создание структуры

HTML структура является довольно обычной: каждый раздел содержит элемент с классом .content, в котором находятся заголовок с абзацем. Классы .img-1, .img-2 и т.д. используются, чтобы задавать разные фоновые изображения через CSS. Элемент с классом .cd-vertical-nav представляет собой стрелочную навигацию (которая видна только на больших экранах). Атрибуты data используются, чтобы в jQuery можно было определить разделы/элементы слайдера.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Добавление стилей

Несколько важных моментов, о которых стоит помнить: устройства на iOS не любят свойство background-attachment: fixed; Поэтому на устройствах с маленьким экраном эффект с фиксированным фоном не будет виден. А также на таких устройствах мы не используем фоновые изображения, но вставляем небольшие фотографии телефонов с помощью псевдо-элементов ::after у элемента .cd-content.

Помимо этого, поскольку мы используем фоновые изображения, у нас нет 100%-го контроля над тем, где будет отображен зафиксированный элемент (в данном случае телефон). С этим тяжело смириться, если вы помешаны на перфекционизме, но я пока не могу найти решение этого вопроса. Вот весь код, который вам понадобится для достижения заявленного эффекта:

Обработка событий

Мы использовали jQuery для реализации базового функционала слайдера, т.е. чтобы можно было перемещаться между разделами (стрелки вверх/вниз на клавиатуре). Когда происходит событие scroll у объекта window, мы обновляем видимость стрелок (функция checkNavigation()) и определяем, какой раздел является видимым (находится в области просмотра) с помощью функции checkVisibleSection(), которая добавляет класс .is-visible для нужного раздела. Функции nextSection() и prevSection() используются для перехода к следующему/предыдущему разделу.

Автор: Sebastiano Guerriero

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree