Полноэкранные эффекты наложения

От автора: Несколько простых и изобретательных стилей наложения и эффектов. От выскальзывания оверлея в окно просмотра до применения фигур-трансформеров SVG – исследуем эффекты полноэкранных наложений.

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

Обратите внимание, что они созданы для современных браузеров, поэтому в более старых нужного эффекта можно не добиться. Для таких браузеров, естественно, следует продумать альтернативные варианты. На первый пример тонкого, однако интересного эффекта, меня вдохновил сайт Huge. Идея состоит в том, чтобы наложение усиливалось, а затем находящийся внутри контент вращался немного в 3D:

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

Для некоторых примеров SVG мы пользуемся Snap.svg с целью трансформирования одного маршрута в другой. Для примера с «маленькими блоками» применена SVG с небольшим количеством JS для контроля за появлением блоков, но, конечно, можно для этого использовать CSS, и вообще не трогать SVG.

Надеемся, вам понравились эти эффекты и послужили источником вдохновения!

Автор: Mary Lou

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

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

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