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

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

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

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

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

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

Эффект основан на анимации, которую мы видели на нескольких действительно хороших сайтах (и Dribbble шотах).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

Также обратите внимание, что демо оптимизированы под десктоп.

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

Посмотрите все демо и HTML файлы, чтобы понять принцип работы эффектов. В каждом демо есть что-то уникальное. В последнем демо часть контента остается скрытой и отображается по нажатию кнопки. Найди этот проект на Github.

Автор: Mary Lou

Источник: //tympanus.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте: