От автора: Набор простых эффектов наложения для творческого вдохновения. Основная идея состоит в том, чтобы один элемент показывался изначально, а затем при запуске некоего механизма показывались, как декоративная деталь, дополнительные элементы. Эффект смотрится креативно при показе в сетках с изображениями или при прокрутке веб-сайта.
Сегодня мы хотели бы поделиться с вами идеями простых эффектов наложения. Вы наверняка видели подобные эффекты, используемые по большей части в галереях изображений, но иногда применяемые к отдельным элементам страницы: один элемент показывается изначально, а затем при запуске некоего механизма показываются еще элементы, обычно в качестве декораций. Можно представить себе пару спусковых механизмов таких эффектов: проведение над элементом мышью, загрузка, прокрутка и щелчок. Используя легкие, но креативные ходы можно создать интересные эффекты, оживляющие статичный дизайн.
Обратите внимание на то, что для некоторых эффектов мы пользуемся перспективами и 3D-преобразованиями, поэтому они станут работать только в современных браузерах.
Прекрасные иллюстрации выполнены Айзеком Монтемайором (Isaac Montemayor). Посмотрите его профайл на Dribbble, он великолепный иллюстратор.
Разметка здесь будет следующей:
|
1 2 3 4 5 6 |
<figure class="stack stack-sidegrid"> </figure> |
Мы используем figure с тремя или четырьмя изображениями. Все изображения, кроме последнего, будут позиционированны абсолютно:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.stack { margin: 20px auto; width: 400px; padding: 0; position: relative; max-width: 100%; } .stack img { max-width: 100%; position: absolute; top: 0; left: 0; transition: all 0.3s; } .stack img:last-child { position: relative; } |
Установка одного из изображений на position relative создаст высоту родительской фигуры.
Смотрите пример эффекта:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* Подвижная сетка */ .stack-bouncygrid.active img { transform: scale(0.48); } .stack-bouncygrid.active img:nth-child(4) { transform-origin: 0 0; } .stack-bouncygrid.active img:nth-child(3) { transform-origin: 100% 0; } .stack-bouncygrid.active img:nth-child(2) { transform-origin: 0 100%; } .stack-bouncygrid.active img:first-child { transform-origin: 100% 100%; } |
Этот эффект перемещает элементы к краям и уменьшает их размер. Обратите внимание, что для некоторых примерах (сеток) мы просто устанавливаем ширину изображений на несколько меньшую. Вы, конечно, используете изображение соответственного размера.
Надеюсь, эти небольшие эффекты вам понравились и оказались вдохновляющими!
Автор: Mary Lou
Источник: //tympanus.net/
Редакция: Команда webformyself.
