Параллакс стена для сайта на JavaScript и CSS3

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Шаг 1. HTML

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

<h1 class="section__title">Vienna</h1>

</button>

</button>

<span class="user__name">Сара Коннор</span>

</div>

</header>

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

<p><span class="text--large">27</span><br />Погода</p>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

<p><span class="text--large">189</span><br />Локация</p>

</a>

</li>

</ul>

</div>

</article>

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

Австрия

</p>

</div>

</a>

</li>

</ul>

</nav>

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

Шаг 2. CSS

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

.nav {

display: none;

border-right: 1px solid rgba(255, 255, 255, 0.1);

overflow-y: auto;

-webkit-overflow-scrolling: touch;

}

.nav__item:not(:last-child) {

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.nav__link {

display: block;

color: #FFF;

font-weight: 200;

}

.nav__link:hover, .nav__link:focus {

background-color: rgba(255, 255, 255, 0.035);

}

@media screen and (min-width: 1024px) {

.nav {

display: block;

grid-column: 1 / 2;

}

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

.section {

min-height: 500px;

min-height: calc(100vh - 4rem - 4rem);

padding-top: 300px;

margin-bottom: 250px;

position: relative;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

scroll-snap-align: start;

}

.section__header {

position: absolute;

top: 50px;

left: 0;

right: 0;

height: 500px;

padding: 2rem;

border-radius: 0.5rem;

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

text-shadow: 0 0 20px rgba(0, 0, 0, 0.25);

}

.section__header::after {

content: "";

display: block;

position: absolute;

top: 50%;

left: 0;

right: 0;

bottom: 0;

background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);

}

.section__title {

font-size: 3.5rem;

font-weight: 200;

margin-bottom: .5rem;

line-height: 1;

}

.section__subtitle {

font-size: 1.5rem;

}

.section__controls {

display: flex;

align-items: center;

position: absolute;

padding: 0 2rem;

top: 0;

left: 0;

right: 0;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.section__content {

position: relative;

z-index: 1;

padding: 0 1rem;

}

@media screen and (min-width: 1024px) {

.section {

margin-bottom: 750px;

}

.section__header {

-webkit-transform: translateZ(-1px) scale(1.9);

transform: translateZ(-1px) scale(1.9);

}

.section__content {

padding: 0;

-webkit-transform: translateZ(0);

transform: translateZ(0);

}

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

.box {

display: flex;

flex: 1 0 0;

position: relative;

padding: 2rem;

border-radius: 0.5rem;

font-size: .875rem;

color: #FFF;

box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);

-webkit-transform: scale(1);

transform: scale(1);

transition: all .25s ease;

-webkit-filter: brightness(100%);

filter: brightness(100%);

}

.box:hover, .box:focus {

-webkit-transform: scale(1.07);

transform: scale(1.07);

-webkit-filter: brightness(110%);

filter: brightness(110%);

z-index: 10;

}

.box--weather {

background-color: #89CDCE;

}

.box--cost {

background-color: #66AEE5;

}

.box--locations {

background-color: #6C73DC;

}

.box--image, .box--video {

padding: 0;

}

.box--video::before, .box--video::after {

content: "";

display: block;

position: absolute;

top: 50%;

left: 50%;

z-index: 10;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.box--video::before {

width: 50px;

height: 50px;

background-color: #FFF;

border-radius: 50%;

box-shadow: 0 0 38px rgba(0, 0, 0, 0.3);

}

.box--video::after {

width: 0;

height: 0;

border-style: solid;

border-width: 10px 0 10px 15px;

border-color: transparent transparent transparent #121519;

margin-left: 2px;

}

.box__img {

display: block;

width: 100%;

height: 100%;

position: absolute;

-o-object-fit: cover;

object-fit: cover;

-o-object-position: center;

object-position: center;

border-radius: 0.5rem;

}

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

Шаг 3. JS

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

const SELECTORS = {

section: '[data-section]',

scrollTo: '[data-scroll-to]',

scrollDir: '[data-scroll-dir]'

}

const sectionsArray = Array.from(document.querySelectorAll(SELECTORS.section))

const scrollToElements = document.querySelectorAll(SELECTORS.scrollTo)

const scrollDirElements = document.querySelectorAll(SELECTORS.scrollDir)

let currentSectionIndex = 0

const getScrollTarget = dir => {

if (dir === 'prev' && currentSectionIndex > 0) {

currentSectionIndex--

return sectionsArray[currentSectionIndex]

}

if (dir === 'next' && currentSectionIndex < sectionsArray.length-1) {

currentSectionIndex++

return sectionsArray[currentSectionIndex]

}

return false

}

scrollDirElements.forEach(el => {

el.addEventListener('click', () => {

const direction = el.dataset.scrollDir

const target = getScrollTarget(direction)

if (target) {

target.scrollIntoView({ behavior: 'smooth' });

}

})

scrollToElements.forEach(el => {

el.addEventListener('click', e => {

e.preventDefault()

const targetId = el.getAttribute('href')

const target = document.querySelector(targetId)

if (target) {

sectionsArray.forEach((section, index) => {

if (section.id === targetId.replace('#','')) {

currentSectionIndex = index

}

})

target.scrollIntoView({ behavior: 'smooth' });

}

})

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