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

 

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

Шаг 1. HTML

Для начала создаем разметку, сначала нам необходимо создать блок с заголовком, который будет основным элементом на странице:

Затем мы добавляем блок который будет содержать все элементы которые будут «подлетать» к блоку с заголовком. Разметка будет следующего типа:

Таких блоков из разметкой у нас, по умолчанию, будет три. Идем дальше, всю конструкцию необходимо добавить в навигацию слева, делаем мы это следующим образом:

Мы рассмотрели разметку на примере одного блока, таких блоков у нас будет три, и каждый из которого мы внесли в навигацию слева. Также не забывайте, что Вам необходимо подключить скрипты и стили к странице.

Шаг 2. CSS

Большую часть работы у нас будет возложено именно на CSS, по этому стили получились достаточно большими, после того как определите общие правила для страницы, необходимо задать стили для навигации:

Теперь необходимо задать стили для контейнера с заголовком, вам необходимо указать стили для изображения, подписей стрелок навигации и прочих деталей:

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

Мелкие детали которые прикрутили для работы демки вы можете просмотреть в исходниках к данном уроку, а теперь переходим далее.

Шаг 3. JS

Нам необходимо добавить немного магии, чтобы у нас все работало с прокруткой и «подлетало» все на свои места, делаем мы этом с помощью следующих функций:

В результате у нас получилась такая замечательная стена с эффектом параллакса, которая станет весьма полезной для сайта портфолио фотографа или блогера. Спасибо большое разработчику Max Böck, за классную идею и материал.

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