Эффект блочной шторки.

Источник: Block Reveal Effects.
Автор:  Mary Lou.
Перевод: .

Последнее время было замечено возрастание интереса веб-пользователей к концепции раскрытия контента посредством схематического бокса. Данный эффект начинается с постепенной прорисовки декоративного прямоугольного элемента, который по достижении своего максимального размера начинает уменьшаться, раскрывая тем самым находящийся под ним контент.

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

В качестве наиболее удачных примеров анимации, вдохновившей на создание подобного эффекта, можно перечислить несколько сайтов (не обошлось и без Dribble):

В сети, конечно, можно найти намного больше примеров, но перечисленные выше несколько вариантов произвели на нас наиболее сильное впечатление.

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

Просим также учесть, что демонстрационные примеры оптимизированы для просмотра на настольных мониторах.

Для того, чтобы понять, как реализован данный эффект, вам необходимо обратиться к HTML коду демо-страниц. Каждый из представленных вариантов имеет некоторые отличия. Так, к примеру, последний пример демонстрирует способ проявления фрагмента контента, располагаемого в верхней части страницы, без предварительного наложения на него прямоугольного объекта.

Поддержка браузерами:
  • ChromeПоддерживается
  • FirefoxПоддерживается
  • Internet ExplorerПоддерживается, начиная с E версии
  • SafariПоддерживается
  • OperaПоддерживается

Вы можете познакомиться с этим проектом на Github, просмотреть демо или загрузить файлы.

Обзор комментариев

Эффект, конечно, интересный, но плохо, что в оригинале статьи не приведен даже базовый шаблон отвечающего за его реализацию кода. Хотя автор и предлагает с целью его получения прибегнуть к обзору исходного кода демо-страниц.

Кстати, этот прием мог бы прекрасно сгодиться для решения проблемы, обсуждаемой в моей недавней публикации. Речь идет о так называемом FOUT эффекте, при котором в период загрузки веб-шрифтов оформляемый с их помощью текст представляется альтернативными системными шрифтами. Вот как раз на этот период времени можно было бы использовать описанный здесь эффект «блочной шторки», временно скрывающей от пользователя неоформленный нужным образом текст. Хотя он и так хорош сам по себе, и может применяться без каких-либо дополнительных причин.

Один из дизайнеров предложил свой способ решения, которое реализовано исключительно с помощью CSS. А вот еще один интересный вариант.

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

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