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

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

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

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

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

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

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

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

Автор: Mary Lou

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

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

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

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

Получить

Метки: , ,

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree