Прості ефекти накладення

22

Від автора: Набір простих ефектів накладання для творчого натхнення. Основна ідея полягає в тому, щоб один елемент показувався спочатку, а потім при запуску якогось механізму показувалися, як декоративна деталь, додаткові елементи. Ефект виглядає креативно при показі у сітках з зображеннями або при перегляді веб-сайту.

Прості ефекти накладенняПрості ефекти накладення

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

Зверніть увагу на те, що для деяких ефектів ми користуємося перспективами і 3D-перетвореннями, тому вони стануть працювати тільки в сучасних браузерах.

Прекрасні ілюстрації виконані Айзеком Монтемайором (Isaac Montemayor). Подивіться його профайл на Dribbble, він чудовий ілюстратор.

Розмітка тут буде наступною:

Ми використовуємо figure з трьома або чотирма зображеннями. Всі зображення, крім останнього, будуть позиционированны абсолютно:

.stack {
margin: 20px auto;
width: 400px;
padding: 0;
position: relative;
max-width: 100%;
}
.stack img {
max-width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.3 s;
}
.stack img:last-child {
position: relative;
}

Установка одного із зображень на position relative створить висоту батьківської фігури.

Дивіться приклад ефекту:

/* Рухома сітка */
.stack-bouncygrid.active img {
transform: scale(0.48);
}
.stack-bouncygrid.active img:nth-child(4) {
transform-origin: 0 0;
}
.stack-bouncygrid.active img:nth-child(3) {
transform-origin: 100% 0;
}
.stack-bouncygrid.active img:nth-child(2) {
transform-origin: 0 100%;
}
.stack-bouncygrid.active img:first-child {
transform-origin: 100% 100%;
}

Цей ефект переміщує елементи до країв і зменшує їх розмір. Зверніть увагу, що для деяких прикладах (сіток) ми просто встановлюємо ширину зображень на дещо меншу. Звичайно, ви використовуєте зображення відповідного розміру.

Сподіваюся, ці невеликі ефекти вам сподобалися і виявилися надихаючими!