От автора: эффекты появления контента в виде блоков уже давно ходят по сети. Сперва появляется декоративный блок, после чего он постепенно уменьшается, открывая контент под ним.
Сегодня мы хотим с вами поделиться парочкой эффектов появления контента в виде блоков, которые недавно были реализованы в нескольких дизайнах. Основная идея заключается в том, что сначала контент прячется за схематическим блоком. Далее блок начинает сжиматься, открывая контент под ним.
Эффект основан на анимации, которую мы видели на нескольких действительно хороших сайтах (и Dribbble шотах).

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееВ сети, естественно, намного больше примеров. Ниже мы покажем лишь парочку недавних, которыми мы вдохновлялись.
Внимание: мы используем flexbox и viewport единицы, которые в старых браузерах могут не поддерживаться, особенно в IE. Сами эффекты используют 3D трансформации и работают только в современных браузерах.
Также обратите внимание, что демо оптимизированы под десктоп.
Посмотрите все демо и HTML файлы, чтобы понять принцип работы эффектов. В каждом демо есть что-то уникальное. В последнем демо часть контента остается скрытой и отображается по нажатию кнопки. Найди этот проект на Github.
Автор: Mary Lou
Источник: //tympanus.net/
Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее