Параллакс стена для сайта на JavaScript и CSS3
Сегодня мы хотим рассказать вам об одном замечательном эффекте, а именно о том, как создать эффект параллакс-стены для сайта при помощи JavaScript и CSS3. По умолчанию у нас будет три блока с фотографиями, которые зафиксированы в навигации слева, при этом в правой части будут сами фотографии, перелистывание к которым будет сопровождаться скольжением дополнительных блоков, которые будут сверху слоя с изображением. Все этом оформлено эффектом параллакса и смотрится очень круто и плавно.
Каждый блок будет кликабельным, кроме этого в слайдер вы сможете указать больше одной картинки, что сделает прокручивание изображений по горизонтали. Также вся конструкция будет полностью адаптивной, что сделает данную стену полностью отзывчивой и функциональной. Смотрите также бесплатные шаблоны и не только от наших партнеров:
Шаг 1. HTML
Для начала создаем разметку, сначала нам необходимо создать блок с заголовком, который будет основным элементом на странице:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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> |
Затем мы добавляем блок который будет содержать все элементы которые будут «подлетать» к блоку с заголовком. Разметка будет следующего типа:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<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> |
Таких блоков из разметкой у нас, по умолчанию, будет три. Идем дальше, всю конструкцию необходимо добавить в навигацию слева, делаем мы это следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
Мы рассмотрели разметку на примере одного блока, таких блоков у нас будет три, и каждый из которого мы внесли в навигацию слева. Также не забывайте, что Вам необходимо подключить скрипты и стили к странице.
Шаг 2. CSS
Большую часть работы у нас будет возложено именно на CSS, по этому стили получились достаточно большими, после того как определите общие правила для страницы, необходимо задать стили для навигации:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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; } } |
Теперь необходимо задать стили для контейнера с заголовком, вам необходимо указать стили для изображения, подписей стрелок навигации и прочих деталей:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
.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); } } |
Затем добавляем классы для блоков которые будут отображаться на основном блоке с заголовком, нам необходимо указать класс для каждого блока, так как это отдельный элемент, на который можно нажать.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
.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
Нам необходимо добавить немного магии, чтобы у нас все работало с прокруткой и «подлетало» все на свои места, делаем мы этом с помощью следующих функций:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
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, за классную идею и материал.
Вот и все. Готово!
Читайте также:
Опубликовал Cooper 18.06.2018 в 12:08, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |