Простой эффект параллакса с использованием единиц измерения em

18 апреля 2017 | Опубликовано в css | 1 Комментарий »

Веб-разработчик Adam Mustill разработал очень интересный способ создания эффекта паралакса с помощью изменения значения базовых единиц измерения em на веб-странице. Мы решили улучшить этот способ и рассказать об этом ниже.

Эффект параллакса обычно создается с помощью сложных действий с десятками элементов, но этот способ позволяет легко управлять положением элементов, меняя единственное значение измерения. Наш вариант упрощает и, на наш взгляд, улучшает этот способ, используя преимущество интересной особенности единицы измерения CSS em: если и родительский, и дочерний элементы измеряются в единицах измерения em, то размеры дочернего элемента вычисляются с помощью перемножения его размера и размеров его родительских элементов. Хотя обычно с этим сложно работать, так что лучше использовать единицы измерения rem, если это возможно, но в этом случае у него есть важное преимущество: необходимость в родительском элементе у единиц измерения em означает, что эффект параллакса может быть ограничен контейнером, а у способа с использованием единиц измерения rem все в теге <body> подвергается воздействию прокрутки, если не предприняты определенные шаги, чтобы нейтрализовать этот эффект.

Мы также упростили и сократили код до одной строки JavaScript вместо нескольких строк Jquery, что еще больше улучшило производительность.

Код HTML и код CSS

Разметка в этом примере вполне понятная: только три изображения и заголовок внутри элемента блока:

<div id="parallax">
        <h1>Simple EM Parallax Technique</h1>
        <img src="candles.jpg" alt>
        <img src="cherry-tree.jpg" alt>
        <img src="pagoda-surrounded-by-trees.jpg" alt>
</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 {
        font-size:3rem; color: #fff; z-index: 2;
        top: 0; text-transform: uppercase;
        width: 100%; text-align: center;
        text-shadow: 0 .2em 5px rgba(0,0,0,0.4);
}
#parallax img:nth-of-type(1) {
        left: 5%; bottom: 22em;
}
#parallax img:nth-of-type(2) {
        left: 28%; z-index: 3; bottom: 8em;
}
#parallax img:nth-of-type(3) {
        left: 55%; bottom: 12em;
}

Важно обратить внимание на очень маленькое значение по умолчанию в единицах измерения em для блока с идентификатором #parallax, значения нижнего отступа у элементов изображений и на то, что размер шрифта заголовку задан в единицах измерения rem, а не em.

Код JavaScript

Начальные настройки выше изменяются одной строкой кода JavaScript:

window.onscroll = function() {
        if (window.pageYOffset > 0) {
                document.getElementById("parallax").style.fontSize = (window.pageYOffset/20)*.1+"em";
                }
        }

Все просто: прокрутка окна браузера вызывает изменение значения размера шрифта в единицах измерения em у блока с идентификатором #parallax. Размер этого изменения вычисляется, исходя из того, на сколько пикселей пользователь прокрутил окно браузера, затем это число делится на 20 и умножается на основной размер шрифта, равный 0.1em. Прокрутка страницы вниз увеличивает значения нижнего отступа для каждого изображения, что отталкивает их вверх. Так как размер шрифта заголовка измеряется в единицах измерения rem, то он не меняется, а его значение порядка расположения по оси z позволяет изображениям двигаться и над ним, и под ним.

Посмотрите пример работы простого эффекта параллакса ниже:

Заключение

Используя этот способ, можно создать множество различных эффектов, надеемся, наш урок вдохновит Вас на эксперименты!

Использованы фотографии Hiro R, лицензированные по лицензии Creative Commons.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

Опубликовано в css, апреля 18, 2017
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Простой эффект параллакса с использованием единиц измерения em

Код HTML и код CSS

Код JavaScript

Заключение

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые