Фиксированный эффект фона при прокрутке на СSSИногда вам не нужно знать js, чтобы придумать творческие и приятные глазу эффекты. В сегодняшнем уроке мы расскажем об интересном приеме CSS, а именно привязанности фона. Вы можете установить фон для крепления в области просмотра. Мы будем использовать это в прокрутке и отображения фона в необходимой нам области. Эффект состоит в том, чтобы изменять фоновое изображения двумя путями, первое это общий фон, в котором будет отображаться информация, и второй-фиксированный телефон с разными элементами.

 

Мы подготовили заранее подборку различных изображений, с тем же размером и графику для общего элемента, который будет фиксироваться в едином  положении.

Шаг 1. HTML

HTML-структура является довольно простой: каждый раздел содержит .content элемент с названием и пунктом. Классы .img-1 , .img-2 и т.д., используется для установки различных фоновых изображений в CSS:

А .cd-vertical-nav является элементом навигационной стрелки (виден только на больших устройствах). Типы данных были использованы для идентификации в jQuery секциях.

Фиксированный эффект фона при прокрутке на СSS

Шаг 2. CSS

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

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

Шаг 3. JS

Мы использовали JQuery для реализации основного ползунка для навигации по различным разделам (предыдущий / следующий стрелки и навигации клавиатуры). В окне прокрутки, мы обновляем (стрелки видимости функцией checkNavigation ()). В  nextSection () и prevSection ()  будут использоваться функции для перехода к следующему / предыдущему разделу.

Вот и все. Готово!

Читайте также: