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

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

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

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

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

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

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

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

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

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

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

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

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

Автор: Mary Lou

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

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


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree