Ефекти появи обєктів у вигляді блоків

21

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

Эффекты появления объектов в виде блоков

скачать исходникидемо

Сьогодні ми хочемо з вами поділитися парочкою ефектів появи контенту у вигляді блоків, які нещодавно були реалізовані в декількох дизайнах. Основна ідея полягає в тому, що спочатку контент ховається за схематичним блоком. Далі блок починає стискатися, відкриваючи контент під ним.

Ефект заснований на анімації, яку ми бачили на кілька дійсно хороших сайтах (і Dribbble шотах).

В мережі, природно, набагато більше прикладів. Нижче ми покажемо лише кілька недавніх, якими ми надихалися.

Эффекты появления объектов в виде блоков

Увага: ми використовуємо flexbox і viewport одиниці, які в старих браузерах можуть не підтримуватися, особливо в IE. Самі ефекти використовують 3D трансформації і працюють тільки в сучасних браузерах.

Також зверніть увагу, що демо оптимізовані під десктоп.

Эффекты появления объектов в виде блоков

Подивіться всі демо і HTML файли, щоб зрозуміти принцип роботи ефектів. У кожному демо є щось унікальне. В останньому демо частина контенту залишається прихованою і відображається по натисненню кнопки. Знайди цей проект на Github.