Фіксовані фонові зображення, що прокручуються. Повністю адаптивне тло з використанням CSS Нерухоме тло css
У цьому уроці ми розповімо, як створити безліч фонових зображень, які будуть змінювати один одного під час прокручування сторінки.
Сьогодні в інтернеті можна побачити безліч сайтів із паралакс-ефектом. Такий ефект можна реалізувати через CSS. По ідеї потрібно просто застосувати паралакс ефект до фонових зображень. Для цього ознайомтеся з CSSвластивістю background-attachment.
Створення структури
HTMLдуже простий: чергуємо елементи
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autom laborum fuga quas ipsam doloribus sequi...
Стилі
Значення за промовчанням для властивості 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%; )
Цей невеликий урок буде про те, як зробити у себе на сайті (або на односторіннику) красиве фіксоване тло, яке плавно перетікатиме з одного зображення в інше при прокручуванні сторінки користувачем. 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" > |
У тезі ми визначили навігацію по блоках із різними зображеннями. На цьому із 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 ; borde ; border : 4px solid #fff ; ) .no-touch .cbp-fbscroller > nav a :hover #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!/ script ><script >$(function() ( cbpFixedScrollLayout.init(); ));</ script >
Висновок
На цьому все. Гарний ефект, та й не складе труднощів, я думаю, вставити його собі на сайт! Бажаю вам успіхів, якщо з'являться проблеми із встановленням – пишіть у коментарях 🙂 .
PS: Я змінив дизайн сайту. На мій погляд, він більш сучасний і зручний.
За промовчанням, коли ви скролите веб-сторінку з фоном, фон прокручується разом з іншими елементами. Іноді це доречно, а іноді хочеться, щоб зображення, задане через background-image завжди залишалося на увазі. Для управління цим станом існує властивість background-attachment.
Значення background-attachment
Властивість може приймати три значення для налаштування поведінки тла:
- scroll (значення за промовчанням) - фонове зображення переміщується разом з іншими елементами при скролі веб-сторінки.
- fixed - значення фіксує фонове зображення, роблячи його нечутливим до скрол. При прокручуванні сторінки фон на задньому плані залишиться нерухомим.
- local - дане значеннябуло додано через те, що у випадку з локальним скролом тло зі значенням scrollповодиться як fixed. При значенні localфон прокручується разом із вмістом елемента, і не прокручується, якщо вміст не скролиться (але прокручується разом із самим елементом).
Для кращого розуміння роботи якості погляньте приклади нижче. Щоб ви могли їх порівняти, ваші всі три значення background-attachment (сподіваємося, що при вивченні CSSви користуєтесь сучасним десктопним браузером!).
background-attachment: scroll
background-attachment: fixed
background-attachment: local
Підтримка браузерами
Повна підтримка всіх значень якості background-attachment є у десктопних браузерів IE9+, Edge 12+, Firefox 25+, Chrome (всі версії), Safari 5+, Opera 11.5+. З мобільних браузеріввсі значення розуміють Opera Mobile, Firefox для Android, IE Mobile та QQ Browser. В інших браузерах підтримка або часткова або відсутня.
Далі у підручнику:властивості background-origin та background-clip для позиціонування фонових зображень та управління обрізанням.
При встановленні нерухомої картинки фону під таблицю, в якій у нас буде розташовуватися текст та інша корисна інформація, створюється наступний ефект: під час прокручування таблиці з текстом фон під нею залишається нерухомим, а чи не зсувається разом із таблицею. Як тут:
Подібний ефект може створити деяку ілюзію двошаровості якогось простору на ваших сторінках.
Зазвичай ефекту нерухомої картинки фону домагаються за допомогою постановки таблицю стилів CSS наступних атрибутів: background-attachment: fixed; Ідеться про таблицю стилів CSS, яка у вас знаходиться в окремому документі з розширенням.css
Є кілька способів встановити те, що нам потрібне.
1-й спосіб.
Вибираємо картинку, яка буде у нас тлом. У даному випадкуя беру ось таку картинку (клікніть по мініатюрі, щоб побачити повний розмір):
У документ стилів css, туди, де задаємо параметри для BODY, вставляємо таку конструкцію:
BODY(background-image: url(адреса картинки фону); background-attachment: fixed; background-repeat: no-repeat; background-position: top;)
В даному випадку ми беремо як картинку фону велике зображення на весь екран (наприклад, 1280 на 1024 px).
Примітка: Якщо у вас немає документа стилів css, вам необхідно створити його, як зазначено в - і прописати посилання на документ стилів css в коді своєї html-сторінки, як зазначено в цьому ж уроці.
Отже, ось які параметри ми задаємо за допомогою стилів:
Background-image: url (адреса картинки фону); - прописуємо адресу нашої фонової картинки 1280 на 1024 px.
Background-attachment: fixed; - задаємо фону вказівку залишатися фіксованим, тобто нерухомим.
Background-repeat: no-repeat; - задаємо фону вказівку не розмножуватися.
Background-position: top; - задаємо позицію фонової картинки: встановлюватися по верхньому краю сторінки.
Отже, ми вставили в документ стилів css, у BODY, ось цю конструкцію:
BODY(background-image: url(адреса картинки фону); background-attachment: fixed; background-repeat: no-repeat; background-position: top;)
Я створила просту таблицю на 70% екрану і помістила в ній текст і дві картинки для наочності. Ось що у нас вийшло на сторінці: (щоб побачити ефект нерухомого фону, покрутіть сторінку вниз-вгору).
2-й спосіб.
Спробуємо поставити маленьку картинку, яка автоматично повторюватиметься і заповнюватиме весь простір сторінки, утворюючи візерунок фону. Ось ця картинка:
При цьому ми фіксуємо все тло, прописуючи в таблиці стилів css ось таку конструкцію:
BODY (background-image: url(адреса картинки фону); background-attachment: fixed; )
Тут ми задали лише параметр: background-attachment: fixed; - тобто, прописали вказівку браузеру зробити фонову картинку нерухомою. Оскільки ми не сказали картинці "не розмножуватися" - вона має у нас розмножитися на весь екран.
3-й спосіб.
Спробуємо встановити фонову картинку з одного боку, а таблицю з текстом і картинками на сторінці розташувати з протилежного боку, щоб вона не загороджувала фонову картинку. Для цього пропишемо в документі css наступне:
BODY ( background: # e0ddd8 url (адреса картинки фону) no-repeat fixed left top )
Background:#e0ddd8 url(адреса фонової картинки) - колір під фоновою картинкою - бежевий, під колір фону самої картинки. Це робиться для того, щоб не було переходу нашої картинки у фон (картинка займає тільки частину екрану).
No-repeat – картинка не розмножується (коштує одна велика картинка з одним із моїх улюблених американських акторів – Робертом Дювалем).
Fixed – фон зафіксований, тобто нерухомий.
Left top - вирівняний по лівому верхньому краю екрану (можна поставити картинку праворуч, а таблицю сайту - зліва, як ви забажаєте. Для цього в документі html у таблиці ви пропишете:
