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

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

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

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

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

Обратите внимание на то, что для некоторых эффектов мы пользуемся перспективами и 3D-преобразованиями, поэтому они станут работать только в современных браузерах.

Прекрасные иллюстрации выполнены Айзеком Монтемайором (Isaac Montemayor). Посмотрите его профайл на Dribbble, он великолепный иллюстратор.

Разметка здесь будет следующей:

<figure class="stack stack-sidegrid">
    
    
    
    
</figure>

Мы используем figure с тремя или четырьмя изображениями. Все изображения, кроме последнего, будут позиционированны абсолютно:

.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 создаст высоту родительской фигуры.

Смотрите пример эффекта:

/* Подвижная сетка */
.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

Источник: 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