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