В последнее время, как я заметил, очень популярна тема параллакса. Избалованные заказчики, которых уже трудно удивить адаптивной версткой, галереями и слайдерами на CSS требуют все новых и новых фишек для своих сайтов. Одной из таких фишек как раз может стать параллакс и сегодня, я как раз расскажу вам про очень хитрый метод параллакса на веб-странице.
Параллакс обычно включает в себя сложные манипуляции десятков отдельныхм элементов, но метод, о котором я хочу вам рассказать, позволяет легко манипулировать элементами путем изменения всего одного свойства родительского блока элементов, участвующих в параллакс-эффекте. Мой вариант упрощает и, как я считаю, улучшает эту технику за счет использования любопытной единицы измерения в CSS - em: если и родительский, и дочерний элементы измеряются в em, отдельные значения перемножаются и влияют на детей. Хотя это обычно геморрой для разработчиков (и хороший повод использовать rem, если есть такая возможность), в данном случае этот метод имеет два больших преимущества:
- Единица измерения
em более кросс-браузерная, чем rem
- Наличие родительского элемента означает, что эффект параллакса может быть ограничен элементами внутри контейнера
HTML и CSS
Разметка примера очень простая: всего лишь три изображения и заголовок внутри тега div
<div id="parallax">
<h1>Простой метод создания паралакса с помощью EM</h1>
<img src="candles.jpg" alt id=candles>
<img src="cherry-tree.jpg" alt id=cherry>
<img src="pagoda-surrounded-by-trees.jpg" alt id=pagoda>
</div>
CSS не намного сложнее:
#parallax {
background-image: url('blurred-background-small.jpg');
background-size: cover; padding-top: 62.5%;
overflow: hidden; position: relative;
font-size: .1em;
}
#parallax * { position: absolute; }
#parallax img {
width: 40%;
height: auto;
box-shadow: 0 .2em 8px 4px rgba(0,0,0,0.5);
}
#parallax h1 {
top: 0;
z-index: 2;
width: 100%;
color: #fff;
font-size: 3rem;
text-align: center;
text-transform: uppercase;
text-shadow: 0 .2em 5px rgba(0,0,0,0.4);
}
#candles {left: 5%; bottom: 22em;}
#cherry {left: 28%; z-index: 3; bottom: 8em;}
#pagoda {left: 55%; bottom: 12em;}
Важные моменты, на которые следует обратить внимание – очень маленькое дефолтное значение em на контейнере #parallax, минимальные значения для каждого изображения и тот факт, что текст заголовка измеряется в rem, а не в em.
JavaScript
Для начальной настройки нам нужна всего лишь одна строчка JavaScript:
window.onscroll = function emParallax() {
if (window.pageYOffset > 0) {
document.getElementById("parallax").style.fontSize =
(window.pageYOffset/20)*.1+"em";
}
}
Все очень просто: прокрутка окна браузера приводит к изменению размера шрифта для контейнера с id="parallax". Это изменение зависит от того, на сколько пикселей вниз пользователем прокрутил страницу. Эту величину мы делим на 20 и умножаем на 0,1. Прокрутка страницы вниз увеличивает отступ снизу для каждого изображения, толкая их вверх. Поскольку размер заголовка указан в rem, его величина остается неизменным, а свойство z-index позволяет изображениям скользить выше и под заголовком.
На самом деле, с этим эффектом можно сделать гораздо больше и я планирую показать более грандиозный пример страницы с эффектом параллакса в самом ближайшем будущем.