Изменяющийся при прокрутке фон на чистом CSS

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

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

Окна и экраны

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

Давайте начнем с основной разметки. Окна и экраны могут быть созданы почти из любого блочного элемента HTML, в этом случае это элементы разделов:

<section>
        <h1>Come To Iceland</h1>
</section>
<section>
        <h1>The last settled part of Europe, much of Iceland remains pristine and untouched.</h1>
</section>
...

Чтобы у всех элементов был нужный размер, удалим все внешние отступы у тега <body>, убедимся, что элементам разделов размер задан с помощью значения включения границ и внутренних отступов, и зададим им высоту, равную высоте окна браузера, используя единицы измерения vw. Размер тексту установлен в тех же масштабируемых единицах измерения:

body { margin: 0; }
section {
        box-sizing: border-box;
        height: 100vh;
        text-align: center;
        padding: 2vw;
        font-size: 6vw;
}

Элементы разделов уже имеют полную ширину. Чтобы отцентровать их содержимое, воспользуемся flexbox. У элементов разделов, у которых есть фоновые изображения, есть общие свойства, так что включим и их в это объявление:

section {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
}

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

section:first-of-type {
        text-transform: uppercase;
        color: #fff;
        font-size: 8vw;
        text-shadow: 0 0 5px rgba(0,0,0,0.4);
}

У четных элементов разделов белый фон:

section:nth-of-type(even) {
        background: #fff;
}

У нечетных элементов разделов есть фоновые изображения:

section:nth-of-type(1) {
        background-image: url(iceland-fjords.jpg);
}
section:nth-of-type(3) {
        background-image: url(iceland-pool-faces.jpg);
}
section:nth-of-type(5) {
        background-image: url(iceland-ice.jpg);
}

И это все! Конечно, этот способ будет работать только в современных браузерах, которые поддерживают единицы изменения vh, vw и Flexbox. Если нужно поддерживать и старые версии браузеров, можно создать запасной вариант в коде CSS, например, с использованием свойства CSS отображения в виде рядов таблицы для каждого раздела.

Использован отличный шрифт Edelsans, созданный Jakob Runge, с его разрешения, и фотографии Gueorgui Tcherednitchenko, Moyan Brenn и Nate Bolt, лицензированные по лицензии Creative Commons.

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

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

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

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

�

Изменяющийся при прокрутке фон на чистом CSS

Окна и экраны

Комментарии

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

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

Страницы

Друзья

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