0 для непрозорості
Ми можемо використовувати непрозорість, щоб контролювати видимість елементів на сторінці - від повністю видимого до повністю прозорого елемента.
Ось кілька порад при використанні opacity
, щоб правильно зазначати видимість елемента і як створити анімацію затухання без використання JavaScript.
Застосування opacity
до елемента
Коли Ви використовуєте властивість opacity
Ви встановлюєте непрозорість для всього елемента, в тому числі і для його дочірніх елементів.
Якщо Ви хочете мати напівпрозорий фон, але хочете щоб інші дочірні елементи (наприклад зображення або текст) були непрозорими, використовуйте прозорість конкретно до фону.
Ось невеличкий код-приклад:
.module {
background: rgba(255,255,255,0.5); /* напівпрозорий */
}
Оpacity
ефект накладання
Коли значення прозорості менше 1, елемент розміщується на новому прошарку і background
може знаходитися під напівпрозорим елементом. Це аналогічно тому, як працює z-index
, і як він створює новий контекст стека використовуючи прозорість.
Створення ефекту появи без JavaScript (JQuery)
Я хотів би почати з невеличкого застереження: я люблю JQuery і часто користуюсь ним - практично в кожному проекті. Те, що я говорю тут, не свідчить про те що я відмовляюсь від нього (хоча насправді він не потрібен в даному випадку).
Ми можемо створити ефект появи, комбінуючи opacity
, transition
і деякі можливості JavaScript, а саме перемикання класів.
Для того щоб зрозуміти цю картину, уявіть собі ситуацію, де клацнувши кнопку модальне вікно блякне, виявляючи нам деякий контент. Цей контент повен бути схований при завантаженні сторінки і потім відображений за допомогою JQuery fadeIn()
методу.
$('.show-modal-button').on('click',function(e) {
e.preventDefault();
$('.modal').fadeIn();
});
Ми можемо використати JavaScript для того щоб display: none
став display: block
за допомогою інлайнових стилів.
Я намагаюсь не використовувати інлайнові стилі, замість цього, ми можемо досягти того ж ефекту за допомогою створення класів "станів" - один для видимого і один для невидимого станів. Далі я застосовую перехід до елементу, який ми хочемо сховати, а потім вже перемикаю різні стани, використовуюючи просте перемикання класів. Ви можете використовувати псевдо-класи CSS як: :hover
або :focus
, якщо ви хочете виконати анімацію тільки на CSS.
Спочатку ми створимо класи "станів" в CSS. Я використовую іменовані префікси is-
, щоб показати, що клас є станом.
.modal {
/* other styles for modal */
transition: opacity 1s ease;
}
.modal.is-visible {
opacity: 1;
}
.modal.is-hidden {
opacity: 0;
}
Тепер ми можемо перемикати стани за допомогою динамічного додавання або видалення класів в JavaScript (за умови, що ви починаєте з класу is-hidden
в HTML):
$('.show-modal-button').on('click',function(e) {
// turn off the is-hidden class and turn on the is-visible class
$('.modal').toggleClass('is-hidden is-visible');
});
Ну на цьому ми й закінчимо, ось так швиденько ми оглянули 3 підказки про властивість opacity
.
Якщо у вас є можливість створити анімацію за допомогою CSS без використання JavaScript - просто зробіть це! Таким чином ви досягнете більшого контролю і зможете зробити досить химерні ефекти.
Дякую за увагу!
Ще немає коментарів