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

Простое решение проблемы отсутствия свойства прозрачности фона

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

body {
        background: linear-gradient(rgba(255, 255, 255, 0),
                rgba(255, 255, 255, 0)), url(times-square-perspective.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed !important;
        background-size: 100% !important;
        background-position: center top !important;
        padding: 1rem;
        padding-top: 45%;
        color: #fff;
}

Градиент, который, так как он задан первым, будет находится выше изображения и накладываться на него сверху, пока что невидим из-за нулевого значения прозрачности альфа-канала в конце каждого значения остановки цвета. Значение !important (важное) применяется, чтобы гарантировать, что свойства CSS не перезапишутся кодом JavaScript, который будет скоро применен.

Код HTML такой:

<h1>New York Stories</h1>
        <p>In my younger and more vulnerable years…

И, наконец, поместим элемент заголовка сверху:

h1 {
        text-shadow: 0 0 5px rgba(0,0,0,0.5);
        font-size: 4rem; color: #fff;
        line-height: 1; position: absolute;
        top: 10px;
}

Чтобы абзац был читаемым при прокрутке вперед, нам нужно пошагово сделать градиент непрозрачно-белым, чтобы фоновое изображение постепенно исчезло.

Изменение градиентов CSS с помощью JavaScript

Добавим этот скрипт вниз страницы:

var nystories = document.querySelector("p").offsetTop;
window.onscroll = function() {
  if (window.pageYOffset > 0) {
        var opac = window.pageYOffset / nystories;
        document.body.style.background = "linear-gradient(rgba(255, 255, 255, " + opac + "), rgba(255, 255, 255, " + opac + ")), url(times-square-perspective.jpg) no-repeat";
        }
}

В этом случае переменная nystories — это расположение первого абзаца на странице. Когда пользователь начинает прокручивать страницу, скрипт создает переменную opac, которая делит текущее расположение окна на начальное расположение первого абзаца. Вычисленное значение объединяется со значением rgb остановки цвета градиента как значение прозрачности альфа, создавая эффект постепенного исчезновения фонового изображения при вертикальной прокрутке окна браузера.

И в результате получаем следующее:

Можно создать много действий, связанных с прокруткой страницы, не бойтесь экспериментировать!

Использована фотография Damianos Chronakis, лицензированная по лицензии Creative Commons Attribution-ShareAlike 2.0 Generic license. 

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

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

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

• Создание эффекта полутонов с использованием SVG
• Полноэкранное фонового видео с текстом в режиме наложения
• Генератор фоновых узоров SVG из пересекающихся кругов