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

14

Від автора: ефект прокручується фонового зображення в CSS не новий. І сьогодні, відвідавши кілька сайтів, я натрапив на ефект прокрутки фонового зображення, тому я вирішив, що варто поділитися з вами як зробити фонове зображення для сайту CSS.

Нижче представлений ефект:

Зауважте, що цей спосіб відрізняється від слайд шоу або каруселі на CSS, де контент поділений на слайди, які можна зупинити. На CodePen є маса прикладів слайдерів і каруселей. За основу в даній методиці береться фонове зображення для елемента, яке зациклено прокручується по осі Х, створюючи ефект нескінченної стрічки.

Пишемо розмітку

Приблизно так виглядає структура макету HTML:

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

Один елемент займає всю ширину області перегляду, а інший елемент йде поверх першого. Тобто в HTML розмітки всього два тега: один для фонового зображення, інший – контейнер для цього зображення.

Позиціонування елементів

Продовжимо і додамо трохи стилів для правильного відображення наших тегів.

.wrapper {
overflow: hidden;
}
.sliding-background {
height: 500px;
width: 5076px;
}

За замовчуванням .wrapper займає 100% ширини браузера (блочний елемент), до нього додається властивість overflow, яке ховає все, що виходить за межі блоку. Уявіть інструмент обрізки фотографій, принцип роботи такий же. За межами блоку може бути все що завгодно, але ми цього не побачимо.

А тепер візьмемося за наш блок .sliding-background. Для блоку встановлюється неймовірна ширина, яка буде більше існуючих розмірів екрану. В цьому і вся фішка: я вибрав довільну ширину 5076px.

Створення фонового зображення

Якщо нам необхідно скролл зображення, то треба його створити, так адже? Це наша наступна задача. Пам’ятайте, трохи вище я згадав про довільної ширині блоку в 5076px для фонового зображення? Ширина насправді довільна, але не повністю, дане значення відмінно ділиться на 3. Отримане значення добре вписується в хвилинний цикл. Це означає, що полотно для нашого фонового зображення дорівнює 5076/3 або 1692px. По завершенню прокручування зображення, воно почне повторюватися. Повторення складають три рази в хвилину в нескінченному циклі. Математика!

А висота в 500px дійсно довільна. Вона може бути будь-якою. За посиланням можна завантажити Photoshop шаблон, який використовується в демо вище.

Збережіть зображення (не забудьте оптимізувати для веб!). Його ми і будемо використовувати в якості фонового зображення в CSS:

.sliding-background {
background: url(«..path/to/image») repeat-x;
height: 500px;
width: 5076px;
}

Відмінно! Ми отримали величезне зображення, яке виходить за рамки блоку-обгортки. Тепер його можна зациклити.

Ефект прокручування

Змусимо цю штуку рухатися. Зображення повинно рухатися зліва направо по нескінченного циклу, створюючи безшовний ефект зацикленості. Задамо CSS анімацію:

@keyframes .slide {
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(-1692px, 0, 0);
}
}

За допомогою властивості transform на старті анімації спозиционируем зображення по лівому краю блоку-обгортки:

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

До завершення анімації значення властивості transform зміниться на протилежне (з лівого на правий), рівне значенню ширини зображення. Від 0% до 100% наше зображення повториться рівно три рази, т. к. в .sliding-background у нас три однакових зображення.

Зауважте: Причина, по якій ми взагалі використовуємо ще один div, а не анимируем властивість background-position на основному div, в тому, що властивість transform набагато більш продуктивно. Зациклим анімацію, викликавши наш slide у класу .sliding-background:

.sliding-background {
background: url(«..path/to/image») repeat-x;
height: 560px;
width: 5076px;
animation: slide 60s linear infinite;
}

Властивість animation говорить блоку .sliding-background використовувати анімацію slide тривалістю в одну хвилину лінійно і зацикленно.

Збираємо всі разом

.wrapper {
overflow: hidden;
}
.sliding-background {
background: url(«..path/to/image») repeat-x;
height: 560px;
width: 5076px;
animation: slide 60s linear infinite;
}
@keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(-1692px, 0, 0);
}
}