Фіксований мінливий фон для сайту

Цей невеликий урок буде про те як зробити у себе на сайті (або на одностранічнік) красивий фіксований фон, який буде плавно перетікати з одного зображення в інше при прокручуванні сторінки користувачем. В CSS є таке властивість background-attachment: fixed, яке дозволяє зафіксувати фонове зображення. Тобто при прокручуванні сторінки воно не буде прокручуватися зі сторінкою. Але в CSS немає властивості, яке дозволило б зробити зміну зображень при прокручуванні, тому ми скористаємося javascript.

Можливо ви не зрозуміли про що я пишу, тому подивіться демо і ви самі побачите цей красивий ефект:

дивитися прімерСкачать

Як же зробити мінливий фон для сайту?

HTML

Почнемо ми з того, що визначимо HTML структуру сторінки, для якої робимо цей ефект:

1234567891011121314

lt;div id="Cbp-fbscroller" class="Cbp-fbscroller"gt;lt;a href="# Fbsection1" class="Cbp-fbcurrent"gt; Блок з першим зображеннямlt;/agt;lt;a href="# Fbsection2"gt; Блок з другим зображеннямlt;/agt;lt;a href="# Fbsection3"gt; Блок з третім зображеннямlt;/agt;lt;a href="# Fbsection4"gt; Блок з четвертим зображеннямlt;/agt;lt;a href="# Fbsection5"gt; Блок з п`ятим зображеннямlt;/agt;lt;/navgt;id="Fbsection1"gt; lt;/sectiongt;id="Fbsection2"gt; lt;/sectiongt;id="Fbsection3"gt; lt;/sectiongt;id="Fbsection4"gt; lt;/sectiongt;id="Fbsection5"gt; lt;/sectiongt;lt;/divgt;

У тезі

ми визначили навігацію по блокам з різними зображеннями. На цьому з HTML розміткою закінчили. Переходимо до стилів.

CSS

Що стосується стилів, то їх тут не дуже багато.

Відео: Мінливий фон сайту

Робимо висоту блоку на всю максимально можливу. Тобто на висоту вікна браузера користувача.

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

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

123456789101112131415161718192021222324252627282930313233

.cbp-fbscroller gt; 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 gt; 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 gt; nav a: hover {background: rgba(255,255,255,0.6)-}.cbp-fbscroller gt; nav a.cbp-fbcurrent {background: #fff-}

Відео: Як додати фіксований фон на сайт

Деякі властивості я прокоментував, думаю зрозуміло яке властивість за що відповідає. Якщо не зовсім - пишіть в коментарях! # 128578;

В результаті у нас вийде наступне меню:

Далі необхідно написати стилі щоб зображення не повторювалися і були зафіксовані. Робимо це за допомогою наступних властивостей:

12345678910

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

Відео: Как сделать динамічно змінюється фон у Adobe Muse

Залишилося для відповідних блоків задати необхідні зображення:

+12345678910111213141516171819

# 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

12345678

lt;script src="Https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"gt; lt;/scriptgt;lt;script src="Js / jquery.easing.min.js"gt; lt;/scriptgt;lt;script src="Js / cbpFixedScrollLayout.min.js"gt; lt;/scriptgt;lt;scriptgt; $ (function () {cbpFixedScrollLayout.init () -}) -lt;/scriptgt;

висновок

На цьому все. Гарний ефект, та й не важко, я думаю, вставити його собі на сайт! Бажаю вам успіхів, коли з`являться проблеми з установкою - пишіть в коментарях # 128578; .

P.S .: Я змінив дизайн сайту. На мій погляд він більш сучасний і зручний.