• Главная»
  • Уроки»
  • CSS»
  • Фиксированные, прокручивающиеся фоновые изображения

Фиксированные, прокручивающиеся фоновые изображения

demosourse

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

Сегодня в интернете можно увидеть множество сайтов с параллакс-эффектом. Похожий эффект можно реализовать через CSS. По идее нужно просто применить параллакс эффект к фоновым изображениям. Для этого ознакомьтесь с CSS свойством background-attachment.

Создание структуры

HTML очень прост: чередуем элементы <div> с классом .cd-fixed-bg – для фиксации фона – с элементами <div> с классом .cd-scrolling-bg – обычными настройками для фона.

<main>
	<div class="cd-fixed-bg cd-bg-1">
		<h1><!-- title goes here --></h1>
	</div>

	<div class="cd-scrolling-bg cd-color-2">
		<div class="cd-container">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
			</p>
		</div>
	</div>
</main>

Стили

Значение по умолчанию для свойства background-attachment равно scroll, что означает прокрутку фона вдоль элемента. Если же задать значение fixed, то позиция будет фиксированной.

body, html, main {
	/* important */
	height: 100%;
}

.cd-fixed-bg {
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}

.cd-fixed-bg.cd-bg-1 {
  background-image: url("../img/cd-background-1.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../img/cd-background-2.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("../img/cd-background-3.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("../img/cd-background-4.jpg");
}

.cd-scrolling-bg {
	min-height: 100%;
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/
Перевел: Станислав Протасевич
Урок создан: 25 Февраля 2016
Просмотров: 18387
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^