Способи використання фіксованих фонових малюнків в CSS

34

Від автора: можете сприймати цю статтю, як осяяння при роботі з CSS. Властивість background-attachment ще ніколи не було так корисно для мене. Я завжди сприймав його, як щось старе часів GeoCities, коли це властивість використовувалося для повторення фонового малюнка і його фіксації на одному місці під час прокручування сторінки.

Як виявилося, фонові малюнки з фіксованим позиціонуванням набагато корисніше, ніж показано в демо вище. Всього один рядок background-attachment: fixed; дає нам можливість створити плавний перехід від вмісту до контенту так, щоб це тільки поліпшило користувальницький досвід роботи з сайтом. Крім того, властивість не залежить від JS або важкої анімації.

Штучна презентація

Хочете створити презентацію? Розбити сторінку на слайди досить просто:

.slide {
background-image: url(‘path-to-url’);
background-attachment: fixed;
height: 100vh;
width: 100%;
}

Якщо прописати елемент .slide в HTML коді три рази, то по мірі прокручування сторінки один слайд буде перекривати інший.

Жодних бібліотек. Ми не ховаємо смугу прокручування. Чистий CSS і повна підтримка браузера (без сенсорних екранів). Можна створити щось веселе, якщо з’єднати з CSS Scroll Snap Points.

Слайд-хедер

Скажімо, ми хочемо створити незвичайний хедер, який по мірі прокручування сторінки буде перекриватися контентом. Можна зробити.

Уявна прозорість

Пам’ятаєте: у школі стояли такі проектори, кодоскопы, і вчителям доводилося використовувати спеціальні прозорі плівки, щоб показати щось поверх проектованого зображення? Ми можемо зробити так само!

Інші приклади

На CodePen так багато чудових прикладів використання фіксованих фонових малюнків. Ми вибрали лише кілька з них.

Слайд-панелі на початку і середині статті

Напівпрозорі секції з нахилом

Кинеограф

Роздільники статті у вигляді заголовків з фоновим малюнком

Зміна заголовка під час переходів по панелям

Цей приклад заснований не на властивості background-attachment, але ефект дуже крутий і схожий на дане властивість.