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

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

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

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

Шаг 1. HTML

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

<header class="section__header" style="background-image: url('изображение');">
<h1 class="section__title">Vienna</h1>
<p class="section__subtitle"></p>
<div class="section__controls">
<button class="btn btn--prev" title="Назад">
<span class="arrow arrow--left"></span>
</button>
<button class="btn btn--next" title="Вперед">
<span class="arrow arrow--right"></span>
</button>
<div class="user">
<img src="Изображение" alt="" />
<span class="user__name">Сара Коннор</span>
</div>
</div>
</header>

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

</button>

</button>

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

</div>

</header>

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

<div class="section__content">
<ul class="boxgrid">
<li class="boxgrid__item">
<a href="#" class="box box--weather">
<p><span class="text--large">27</span><br />Погода</p>
</a>
</li>
<li class="boxgrid__item boxgrid__item--wide">
<a href="#" class="box box--image">
<img src="#" class="box__img" alt="" />
</a>
</li>
<li class="boxgrid__item boxgrid__item--push">
<a href="#" class="box box--image">
<img src="#" class="box__img" alt="" />
</a>
</li>
<li class="boxgrid__item">
<a href="#" class="box box--cost">
<p><span class="text--large">120</span><br />Цена</p>
</a>
</li>
<li class="boxgrid__item boxgrid__item--push">
<a href="#" class="box box--video">
<img src="#" class="box__img" alt="" />
</a>
</li>
<li class="boxgrid__item">
<a href="#" class="box box--locations">
<p><span class="text--large">189</span><br />Локация</p>
</a>
</li>
</ul>
</div>
</article>

<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>

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

<nav class="nav">
<ul class="nav__menu">
<li class="nav__item">
<a href="#vienna" class="nav__link" data-scroll-to>
<div class="media">
<img src="#" alt="" class="media__img">
<p class="media__content">
<strong>Вена</strong><br />
Австрия
</p>
</div>
</a>
</li>

</ul>

</nav>

Австрия

</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;
}
}

.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);
}
}

.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;
}

.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' });
}
})
})

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, за классную идею и материал.