X
Юрий Немец

Фиксированный меняющийся фон для сайта

Этот небольшой урок будет о том как сделать у себя на сайте (или на одностраничнике) красивый фиксированный фон, который будет плавно перетекать из одного изображения в другое при прокрутке страницы пользователем. В CSS есть такое свойство background-attachment: fixed, которое позволяет зафиксировать фоновое изображение. То есть при прокрутке страницы оно не будет прокручиваться со страницей. Но в CSS нет свойства, которое позволило бы сделать смену изображений при прокрутке, поэтому мы воспользуемся Javascript.

Фиксированный фон для сайта



Возможно вы не поняли о чем я пишу, поэтому посмотрите демо и вы сами увидите этот красивый эффект:

Смотреть примерСкачать

Как же сделать меняющийся фон для сайта?

HTML

Начнем мы с того, что определим HTML структуру страницы, для которой делаем этот эффект:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="cbp-fbscroller" class="cbp-fbscroller">
    <nav>
        <a href="#fbsection1" class="cbp-fbcurrent">Блок с первым изображением</a>
        <a href="#fbsection2">Блок со вторым изображением</a>
        <a href="#fbsection3">Блок с третьим изображением</a>
        <a href="#fbsection4">Блок с четвертым изображением</a>
        <a href="#fbsection5">Блок с пятым изображением</a>
    </nav>
    <section id="fbsection1"></section>
    <section id="fbsection2"></section>
    <section id="fbsection3"></section>
    <section id="fbsection4"></section>
    <section id="fbsection5"></section>
</div>

В теге <nav> мы определили навигацию по блокам с разными изображениями. На этом с HTML разметкой закончили. Переходим к стилям.



CSS

Что касается стилей, то их здесь не очень много.

Делаем высоту блока на всю максимально возможную. То есть на высоту окна браузера пользователя.

1
2
3
4
5
6

html, body, 
.container,
.cbp-fbscroller,
.cbp-fbscroller section { 
    height: 100%; 
}

Дальше разбираемся с навигацией, которая отображается справа в виде кружочков (если находимся на активном блоке, то кружок закрашен).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

.cbp-fbscroller > nav {
	position: fixed;  /* меню всегда на одном месте */
	z-index: 9999; /* ничто не должно перекрывать меню */
	right: 100px; /* оно находится от правого края на 100 пикселей */
	top: 50%; /* и по вертикали по середине страницы */
	width: 26px; /* ширина меню */
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
 
/* ниже идут стили для каждого элемента (ссылки) в меню */ 
.cbp-fbscroller > nav a {
	display: block;
	position: relative;
	z-index: 9999;
	color: transparent;
	width: 26px;
	height: 26px;
	outline: none;
	margin: 25px 0;
	border-radius: 50%;
	border: 4px solid #fff;
}
 
.no-touch .cbp-fbscroller > nav a:hover {
	background: rgba(255,255,255,0.6);
}
 
.cbp-fbscroller > nav a.cbp-fbcurrent {
	background: #fff;
}

Некоторые свойства я прокомментировал, думаю понятно какое свойство за что отвечает. Если не совсем — пишите в комментариях! 🙂

В итоге у нас получится следующее меню:

Далее необходимо написать стили чтобы изображения не повторялись и были зафиксированы. Делаем это с помощью следующих свойств:

1
2
3
4
5
6
7
8
9
10

.cbp-fbscroller section {
	position: relative;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}
 
.no-touch .cbp-fbscroller section {
	background-attachment: fixed;
}

Осталось для соответствующих блоков задать необходимые изображения:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#fbsection1 {
	background-image: url(../images/1.jpg);
}
 
#fbsection2 {
	background-image: url(../images/2.jpg);
}
 
#fbsection3 {
	background-image: url(../images/3.jpg);
}
 
#fbsection4 {
	background-image: url(../images/4.jpg);
}
 
#fbsection5 {
	background-image: url(../images/5.jpg);
}

Остался Javascript!



Javascript

В конце документа необходимо вставить следующие jQuery библиотеки:

  • jquery.easing.min.js
  • cbpFixedScrollLayout.min.js
1
2
3
4
5
6
7
8

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/cbpFixedScrollLayout.min.js"></script>
<script>
	$(function() {
		cbpFixedScrollLayout.init();
	});
</script>


Вывод

На этом всё. Красивый эффект, да и не составит труда, я думаю, вставить его себе на сайт! Желаю вам успехов, если появятся проблемы с установкой — пишите в комментариях 🙂 .

P.S.: Я изменил дизайн сайта. На мой взгляд он более современный и удобный.


Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/

Категории: jQuery