Параллакс эффект на CSS. Параллакс фон для блока

Делаем параллакс эффект для блока с помощью CSS. Красивые и простые блоки с параллакс эффектом без Java Script

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

Структура кода

Для начала давайте коротко разберём структуру кода наших блоков.



<div id="summary"> - блок, в котором будут располагаться наши секции с паралакс фоном.

<section> - обёртка блока с фоном.

<div class="parallax-one darken-image text"> - конечный блок с нашим фоном. Так как секций у нас будет три (для наглядности), то мы зададим данному блоку классы. Класс .parallax-one - общие свойства и ссылка на фон именно для первого блока. Класс .darken-image поможет слегка затемнить наши фоны. При желании этот класс можно удалить. Класс .text поможет нам отформатировать текст внутри блока.

Смотрим дальше. Теги <h2> и </h2><h4> просто представляют собой заголовки второго и четвертого уровня.

Вот, в принципе и всё по структуре HTML. Такой формат повторяется три раза, так как блоков у нас будет именно три. Меняется лишь класс parallax-*, для того чтобы каждому блоку назначить свой собственый фон для параллакс эффекта.

Стили для нашего эффекта



Стили типографии и затеменения фонов рассматривать не будем, так как они не относятся к сути статьи. При необходимости вся информация имеется в интернете. На данный момент нас интересует блок объявлений селектора #summary .parallax-one, #summary .parallax-two, #summary .parallax-three.

Описание свойств стилей

Свойства padding-top: 150px;, padding-left: 50px;, padding-right: 50px;, padding-bottom: 150px; - представляют собой внутренние отступы содержимого блока от его границ сверху, слева, справа и снизу соответственно. В данном случае представлено очень упрощенное оформление для наглядного представления. Впоследствиии, если хотите делать "правильный" CSS код, то прописывайте свойство более кратко: padding: 150px 50px;

overflow: hidden; - показываем только то, что внутри блока.

position: relative; - положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

width: 100%; - ширина блока на всю страницу.

background-image: url(""); - устанавливаем фоновое изображение.

background-attachment: fixed; - делаем фоновое изобрадение блока неподвижным.

background-size: cover; - масштабируем изображение с сохранением пропорций.

-moz-background-size: - масштабируем изображение с сохранением пропорций для браузера Mozilla Firefox

-webkit-background-size: - масштабируем изображение с сохранением пропорций для браузера Chrome, Safari, Opera;

background-repeat: no-repeat; - отключаем повтор фона.

background-position: top center; - выравниваем фоновое изображение.

Вот и всё. Осталось прописать стили с индивидуальными для второго и третьего блока изображениями.


Comments