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

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

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

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

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

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

.overlay-hugeinc {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0s 0.5s;
}
 
.overlay-hugeinc.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s;
}
 
.overlay-hugeinc nav {
    perspective: 1200px;
}
 
.overlay-hugeinc nav ul {
    opacity: 0.4;
    transform: translateY(-25%) rotateX(35deg);
    transition: transform 0.5s, opacity 0.5s;
}
 
.overlay-hugeinc.open nav ul {
    opacity: 1;
    transform: rotateX(0deg);
}
 
.overlay-hugeinc.close nav ul {
    transform: translateY(25%) rotateX(-35deg);
}

Для того, чтобы оверлей полностью исчезал, мы используем прием 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree