style.backgroundAttachment — фон fixed чи scroll у JS
Загальний опис
backgroundAttachment є властивістю об'єкта style, що належить до будь-якого HTML-елемента. Ця властивість дозволяє встановлювати або отримувати значення властивості CSS background-attachment, яка визначає, чи фонове зображення прокручується разом із вмістом елемента або залишається нерухомим при прокручуванні. Основна суть backgroundAttachment полягає в тому, щоб контролювати поведінку фону під час прокручування, що може бути корисним для створення ефекту паралакса та інших візуальних ефектів на веб-сторінках.
Основні сфери застосування backgroundAttachment включають веб-дизайн, де необхідно створити візуальні ефекти фону, який залишається нерухомим (fixed) або прокручується (scroll) разом із вмістом. Це може бути використано для виділення певних розділів сторінки, покращення користувацького досвіду або створення цікавих анімаційних ефектів.
Розглянемо приклади використання backgroundAttachment від найпростіших випадків до складніших.
Перший приклад показує, як встановити фон, що залишається нерухомим при прокручуванні сторінки:
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: 100%;
height: 300px;
border: 1px solid black;
background-image: url('background.jpg');
}
</style>
</head>
<body>
<div id="myDiv">Це див</div>
<button onclick="setFixedBackground()">Зробити фон нерухомим</button>
<script>
function setFixedBackground() {
let element = document.getElementById('myDiv');
element.style.backgroundAttachment = 'fixed';
}
</script>
</body>
</html>
У цьому прикладі, коли користувач натискає кнопку, викликається функція setFixedBackground, яка встановлює значення backgroundAttachment на fixed. Це означає, що фонове зображення залишиться нерухомим при прокручуванні сторінки.
Далі розглянемо приклад, де фон елемента прокручується разом із вмістом:
let element = document.getElementById('myDiv');
element.style.backgroundAttachment = 'scroll';
У цьому випадку, при натисканні на кнопку, викликається функція setScrollBackground, яка встановлює значення backgroundAttachment на scroll. Це означає, що фонове зображення буде прокручуватися разом із вмістом елемента.
Також можливе встановлення значення local, яке фіксує фонове зображення відносно елемента, а не всієї сторінки:
let element = document.getElementById('myDiv');
element.style.backgroundAttachment = 'local';
У цьому прикладі, при натисканні на кнопку, викликається функція setLocalBackground, яка встановлює значення backgroundAttachment на local. Це означає, що фонове зображення буде прокручуватися разом із вмістом елемента, але не всієї сторінки.
Таким чином, властивість backgroundAttachment є потужним інструментом для керування поведінкою фону елементів під час прокручування. Це дозволяє розробникам створювати багаті візуальні ефекти та покращувати користувацький досвід, забезпечуючи гнучкість і контроль над стилями фону в веб-додатках.
- Порада
-
Значення
автор: Bondelement.style.backgroundAttachment = "scroll"(за замовчуванням) зробить фонове зображення прокручуваним разом із вмістом елемента. Це корисно для створення суцільного фону для блоків тексту або інших елементів, які можуть бути довгими. - Порада
-
Якщо ви використовуєте
автор: Bondbackground-attachment: fixedнаbody, пам'ятайте, що фонове зображення може відображатися поверх інших елементів на сторінці. Для уникнення цього, встановлюйте фіксовані фони на внутрішніх контейнерах замістьbody. - Порада
-
Порада 4:
автор: BondbackgroundAttachmentпрацює лише з фоновими зображеннями, встановленими за допомогоюurl(). Якщо ви використовуєте градієнти або кольори як фон, ця властивість не матиме ніякого ефекту. Для фіксованих градієнтів або кольорів використовуйтеbackground-attachmentнаbody.
Синтаксис
element.style.backgroundAttachmentПереглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі ми отримуємо доступ до елемента за його id та встановлюємо фіксоване фонове зображення, використовуючи властивості backgroundImage та element.style.backgroundAttachment = 'fixed'. Це створить паралаксний ефект, коли зображення залишатиметься нерухомим під час прокручування вмісту.
HTML
<div id="myElement">Демонстраційний елемент</div>JS
const element = document.getElementById('myElement');
// Встановлюємо фіксоване фонове зображення
element.style.backgroundImage = 'url("image.jpg")';
element.style.backgroundAttachment = 'fixed';HTML
<header>
<h2 class="title">element.style.backgroundAttachment</h2>
<p class="description">Визначає, чи буде фон прокручуватися разом зі сторінкою або залишатиметься зафіксованим.</p>
</header>
<main>
<div class="result">
<!-- Елемент з фоном -->
<div id="backgroundBox" class="background-box"></div>
<!-- Інтерфейс для управління -->
<label for="attachmentMode">Виберіть режим background-attachment:</label>
<select id="attachmentMode">
<option value="scroll">scroll</option>
<option value="fixed">fixed</option>
<option value="local">local</option>
</select>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
.background-box {
width: 100%;
height: 400px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800'%20height='600'%20viewBox='0%200%20160%20120'%3E%3Crect%20width='160'%20height='120'%20fill='%23a8dadc'/%3E%3Crect%20y='72'%20width='160'%20height='48'%20fill='%23457b9d'/%3E%3Ccircle%20cx='126'%20cy='26'%20r='14'%20fill='%23f4a261'/%3E%3Cpath%20d='M0%2072%2044%2026%2078%2062%2098%2044%20160%2072Z'%20fill='%232a9d8f'/%3E%3C/svg%3E");
background-size: cover;
background-position: center;
overflow-y: auto;
border: 1px solid #ccc;
}JS
const box = document.getElementById('backgroundBox');
const attachmentModeSelect = document.getElementById('attachmentMode');
// Зміна режиму background-attachment на вибране значення
attachmentModeSelect.addEventListener('change', function () {
box.style.backgroundAttachment = attachmentModeSelect.value;
});
//# sourceURL=pen.jsУ цьому прикладі ми отримуємо всі секції з класом .section та для кожної секції встановлюємо фіксоване фонове зображення на основі атрибута data-image елемента .bg-image. Ми також додаємо обробник події для прокручування, який перевіряє, чи секція видима у вікні, і динамічно змінює властивість backgroundAttachment на 'fixed' або 'scroll' відповідно.
Цей приклад демонструє більш складне використання backgroundAttachment, де властивість змінюється динамічно залежно від положення секції на сторінці. Це може бути корисно для створення ефекту паралаксу, коли фонові зображення фіксуються лише тоді, коли відповідні секції видимі у вікні.
const sections = document.querySelectorAll('.section');
sections.forEach(section => {
const bgImage = section.querySelector('.bg-image');
// Встановлюємо фіксоване фонове зображення для кожної секції
bgImage.style.backgroundImage = `url('${bgImage.dataset.image}')`;
bgImage.style.backgroundAttachment = 'fixed';
// Додаємо обробник події для прокручування
window.addEventListener('scroll', () => {
const scrollPosition = window.pageYOffset;
const sectionTop = section.offsetTop;
const sectionHeight = section.offsetHeight;
// Перевіряємо, чи секція видима у вікні
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
bgImage.style.backgroundAttachment = 'fixed';
} else {
bgImage.style.backgroundAttachment = 'scroll';
}
});
});Коментарі
Коментарів ще немає — будьте першим!