Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.
Из-за большого размера статья разбита на три части. Вторая часть. Третья часть.
Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.
Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.
Подготовка к работе.
Для создания эффектов понадобится такая дефолтная html-структура. Вместо .eff в коде каждого конкретного эффекта будет использоваться класс .eff-n, где n — номер эффекта:
<div class="eff"> <img src="img/ef1.jpg" alt="Effect #1" /> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> По определению в каждом эффекте будет, как минимум, одна картинка, блок с описанием, включающий в себя заголовок, маленькое описание и кнопку “View More”. Кроме того, каждый эффект содержит ряд уникальных вспомогательных элементов, которые мы будем добавлять к основной структуре.
Дефолтные css-стили будут такие:
.eff { width: 300px; height: 300px; overflow: hidden; position: relative; cursor: pointer; } .eff img { min-width: 100%; min-height: 100%; } .eff .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; } .eff .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff .caption p { width: 100%; max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; } .eff .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; text-decoration: none; } Эффект #1
Добавляем блок с иконкой в наш html-код. Он состоит контейнера с полупрозрачным фоном и вращающегося контейнера с элементами круга и иконкой внутри. Так будет выглядеть дефолтный код с новым блоком:
<div class="effect eff-1"> <img src="img/ef1.jpg" alt="Effect #1" /> <div class="overlay"> <div class="circle-with-icon"> <div class="circ left-circ"></div> <div class="circ top-circ"></div> <div class="circ right-circ"></div> <div class="circ bottom-circ"></div> <div class="icon"></div> </div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Первый этап — скрываем .caption, добавляем прозрачность и transition для плавного появления, когда оно понадобится:
.eff-1 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; } Дальше стилизуем .overlay, который при наведении увеличивается, выцветая до полной прозрачности:
.eff-1 .overlay { width: 180px; height: 120px; background: rgba(255,255,255,0.6); position: absolute; top: 90px; left: 60px; transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s; } Задержку для увеличения размеров и прозрачности мы установим, когда определим стили для hover-состояния этого элемента, сейчас же задержка установлена для появления .overlay после того, как hover снят, и эффекту надо принять исходное положение.
Далее создадим круг с иконкой в центре из элементов с классом .circ. Чтобы круг мог постепенно, сторона за стороной, превратиться в квадрат, мы соберем его из четырех блоков, каждому из которых будет дана лишь одна скругленная граница.
.eff-1 .overlay .circ { width: 80px; height: 80px; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; top: 0px; left: 0px; background: transparent; } .eff-1 .overlay .left-circ { border-left: 2px solid black; transition: all 0.15s linear 0.3s; } .eff-1 .overlay .top-circ { border-top: 2px solid black; transition: all 0.15s linear 0.2s; } .eff-1 .overlay .right-circ { border-right: 2px solid black; transition: all 0.15s linear 0.1s; } .eff-1 .overlay .bottom-circ { width: 82px; border-bottom: 2px solid black; transition: all 0.15s linear 0s; } Стили для иконки:
.eff-1 .circle-with-icon .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 31px; left: 24px; } Задаем стили для .circle-with-icon, чтобы круг встал по центру подложки и мог вращаться:
.eff-1 .overlay .circle-with-icon { width: 82px; height: 82px; margin: auto; position: relative; top: 19px; transition: transform 0.4s linear 0s; } Собираем эффект.
Закручиваем .circle-with-icon:
.eff-1:hover .circle-with-icon { transform: rotate(360deg); } Превращаем круг в квадрат:
.eff-1:hover .overlay .circ { -webkit-border-radius: 0px; border-radius: 0px; } Увеличиваем .overlay и меняем его прозрачность:
.eff-1:hover .overlay { transform: scale(5); opacity: 0; transition-delay: 0.55s; } Проявляем .caption:
.eff-1:hover .caption { opacity: 1; transition-delay: 0.85s; } Эффект #2
Для этого эффекта html-структура будет аналогична структуре предыдущего эффекта:
<div class="effect eff-2"> <img src="img/ef2.jpg" alt="Effect #2" /> <div class="overlay"> <div class="circle-with-icon"> <div class="circ left-circ"></div> <div class="circ top-circ"></div> <div class="circ right-circ"></div> <div class="circ bottom-circ"></div> <div class="icon"></div> </div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Поскольку .caption для этого эффекта выезжает справа, скроем ее, сместив вправо за край блока с эффектом:
.eff-2 .caption { position: absolute; top: 0px; left: 100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; } Стили для элементов .caption остаются дефолтные.
Стили и логика блока с подложкой, кругом и иконкой тоже аналогичны предыдущему эффекту, кроме значений свойства transition:
.eff-2 .overlay { width: 180px; height: 120px; background: rgba(255,255,255,0.6); position: absolute; top: 90px; left: 60px; transition: all 0.2s linear 0.55s; } .eff-2 .overlay .circ { width: 80px; height: 80px; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; top: 0px; left: 0px; background: transparent; } .eff-2 .overlay .left-circ { border-left: 2px solid black; transition: all 0.15s linear 0.3s; } .eff-2 .overlay .top-circ { width: 82px; border-top: 2px solid black; transition: all 0.15s linear 0.2s; } .eff-2 .overlay .right-circ { border-right: 2px solid black; transition: all 0.15s linear 0.1s; } .eff-2 .overlay .bottom-circ { width: 82px; border-bottom: 2px solid black; transition: all 0.15s linear 0s; } .eff-2 .circle-with-icon .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 31px; left: 24px; } Для .circle-with-icon тоже меняются transition-delay и transition-duration:
.eff-2 .overlay .circle-with-icon { width: 82px; height: 82px; margin: auto; position: relative; top: 19px; transition: all 0.2s linear 0.8s; } Собираем эффект.
Во-первых, .circ не только выпрямляются, но и поворачиваются на 45 градусов для создания ромба:
.eff-2:hover .overlay .circ { border-radius: 0px; transform: rotate(45deg); } Далее исчезает весь блок с ромбом и иконкой:
.eff-2:hover .overlay .circle-with-icon { opacity: 0; transition-delay: 0.4s; } Подложка расширяется на весь размер блока с эффектом:
.eff-2:hover .overlay { width: 100%; height: 100%; top: 0px; left: 0px; } Выезжает .caption:
.eff-2:hover .caption { left: 0px; transition-delay: 0.7s; } Эффект #3
Для этого эффекта html-структура аналогична эффектам #1-2, здесь тоже добавляется блок с подложкой, кругом и иконкой:
<div class="effect eff-3"> <img src="img/ef3.jpg" alt="Effect #3" /> <div class="overlay"> <div class="circle-with-icon"> <div class="circ left-circ"></div> <div class="circ top-circ"></div> <div class="circ right-circ"></div> <div class="circ bottom-circ"></div> <div class="icon"></div> </div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> В этот раз .caption смещаем вверх за край блока с эффектом:
.eff-3 .caption { position: absolute; top: -100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; } Стили для элементов .caption остаются дефолтные.
Устанавливаем новые значения transition для .overlay:
.eff-3 .overlay { width: 180px; height: 120px; background: rgba(255,255,255,0.6); position: absolute; top: 90px; left: 60px; transition: all 0.2s linear 0.65s; } Стили .circ и .circle-with-icon остаются такими же, как в эффектах #1-2:
.eff-3 .overlay .circ { width: 80px; height: 80px; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; top: 0px; left: 0px; background: transparent; } .eff-3 .overlay .circle-with-icon { width: 82px; height: 82px; margin: auto; position: relative; top: 19px; opacity: 1; } Поскольку при наведении у разных частей окружности будет разное поведение, значение transition для них будет тоже отличаться.
Левая и правая стороны просто медленно выцветают:
.eff-3 .overlay .left-circ { border-left: 2px solid black; transition: border-color 0.3s linear 0s; } .eff-3 .overlay .right-circ { border-right: 2px solid black; transition: border-color 0.3s linear 0s; } Нижняя сторона распрямляется, уходит вправо и становится прозрачной через небольшой промежуток времени, чтобы, когда мы снимем hover, мы не увидели, как она возвращается на место:
.eff-3 .overlay .bottom-circ { width: 82px; border-bottom: 2px solid black; transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; } Ну и верхняя часть делает все то же, что и нижняя, только, распрямляясь, еще уходит вниз:
.eff-3 .overlay .top-circ { width: 82px; border-top: 2px solid black; transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; } Для иконки тоже добавляются transition:
.eff-3 .circle-with-icon .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 31px; left: 24px; transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; } Собираем эффект.
Сначала исчезают правая и левая сторона круга:
.eff-3:hover .overlay .left-circ, .eff-3:hover .overlay .right-circ { border-color: transparent; } Потом верхняя часть спускается к нижней:
.eff-3:hover .overlay .top-circ { top: 93%; } В процессе они обе распрямляются и после этого отъезжают вправо:
.eff-3:hover .overlay .top-circ, .eff-3:hover .overlay .bottom-circ { -webkit-border-radius: 0px; border-radius: 0px; left: 500%; opacity: 0; } Иконка уезжает влево:
.eff-3:hover .circle-with-icon .icon { left: -500%; opacity: 0; } Подложка схлопывается в центр:
.eff-3:hover .overlay { transform: scale(0); } И появляется .caption:
.eff-3:hover .caption { top: 0px; transition-delay: 0.75s; } Эффект #4
Дополним базовую html-структуру блоком с подложкой, иконкой и границами, появляющимися при наведении:
<div class="effect eff-4"> <img src="img/ef4.jpg" alt="Effect #4" /> <div class="overlay"> <div class="icon"></div> <div class="borders"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Далее скрываем .caption, но не целиком, а каждый элемент отдельно, чтобы они появлялись по очереди:
.eff-4 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-4 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; opacity: 0; transition: all 0.2s linear 0s; } .eff-4 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-4 .caption p { width: 100%; max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; opacity: 0; transition: all 0.2s linear 0s; } .eff-4 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; opacity: 0; text-decoration: none; transition: all 0.2s linear 0s; } Теперь стилизуем .overlay и иконку. Для иконки необходим отдельный transition, так как она будет исчезать во время расширения подложки.
.eff-4 .overlay { width: 60px; height: 60px; background: rgba(255,255,255,0.6); position: absolute; top: 120px; left: 120px; transition: all 0.2s linear 0s; } .eff-4 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 18px; left: 13px; opacity: 1; transition: all 0.01s linear 0.2s; } Далее нужно указать стили для контейнера с границами:
.eff-4 .borders { width: 90%; height: 90%; position: absolute; top: 5%; left: 5%; opacity: 0; transition: all 0.01s linear 0s; } Общие стили для всех границ:
.eff-4 .border { background: black; position: absolute; transition: all 0.2s linear 0s; } И положение, ширину и высоту для каждой отдельно:
.eff-4 .border-top { height: 2px; width: 0px; top: 0px; left: 0px; } .eff-4 .border-right { height: 0px; width: 2px; top: 2px; right: 0px; } .eff-4 .border-bottom { height: 2px; width: 0px; bottom: 0px; right: 2px; } .eff-4 .border-left { height: 0px; width: 2px; bottom: 2px; left: 0px; } Собираем эффект.
Сначала расширяется подложка:
.eff-4:hover .overlay { width: 100%; height: 100%; top: 0px; left: 0px; } Одновременно с этим исчезает иконка. Для нее мы отменяем при наведении transition-delay, чтобы исчезла она сразу, как только подложка начнет расширяться, но, если мы снимем hover, она появится только после того, как подложка вернется к своим правильным размерам.
.eff-4:hover .overlay .icon { opacity: 0; transition-delay: 0s; } Далее меняем прозрачность контейнера с границами:
.eff-4:hover .borders { opacity: 1; } И, наконец, меняем размеры каждой из границ, подбирая такие transition-delay, чтобы границы изменялись одна за другой:
.eff-4:hover .border-top { width: 100%; transition-delay: 0.2s; } .eff-4:hover .border-right { height: 100%; max-height: calc(100% - 2px); transition-delay: 0.4s; } .eff-4:hover .border-bottom { width: 100%; max-width: calc(100% - 2px); transition-delay: 0.6s; } .eff-4:hover .border-left { height: 100%; max-height: calc(100% - 4px); transition-delay: 0.8s; } Остается только показать элементы .caption:
.eff-4:hover .caption h4, .eff-4:hover .caption p, .eff-4:hover .caption a { opacity: 1; } .eff-4:hover .caption h4 { transition-delay: 0.65s; } .eff-4:hover .caption p { transition-delay: 0.7s; } .eff-4:hover .caption a { transition-delay: 0.75s; } Эффект #5
В этот раз дополним дефолтную структуру двумя блоками с границами, внешним и внутренним:
<div class="effect eff-5"> <img src="img/ef5.jpg" alt="Effect #5" /> <div class="overlay"> <div class="icon"></div> <div class="borders"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </div> <div class="borders-small"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> В этот раз элементы .caption тоже будут скрываться по одному:
.eff-5 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-5 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; opacity: 0; transition: all 0.2s linear 0s; } .eff-5 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-5 .caption p { width: 100%; max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; opacity: 0; transition: all 0.2s linear 0s; } .eff-5 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; opacity: 0; text-decoration: none; transition: all 0.2s linear 0s; } Дальше идут стили для подложки и иконки:
.eff-5 .overlay { width: 60px; height: 60px; background: rgba(255,255,255,0.6); position: absolute; top: 120px; left: 120px; transition: all 0.2s linear 0s; } .eff-5 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 18px; left: 13px; opacity: 1; transition: all 0.01s linear 0.2s; } Обозначаем стили для двух контейнеров с границами:
.eff-5 .borders { width: 90%; height: 90%; position: absolute; top: 5%; left: 5%; opacity: 0; transition: all 0.01s linear 0s; } .eff-5 .borders-small { width: 88%; height: 88%; position: absolute; top: 6%; left: 6%; opacity: 0; transition: all 0.01s linear 0s; } Общие стили для всех вообще границ, больших и маленьких:
.eff-5 .border { background: black; position: absolute; transition: all 0.3s linear 0s; } Теперь стили для каждой границы. Маленькие от больших отличаются начальными координатами так, чтобы, при наведении, они увеличивались навстречу друг другу:
.eff-5 .borders .border-top { top: 0px; left: 0px; width: 0px; height: 2px; } .eff-5 .borders .border-left { top: 0px; left: 0px; width: 2px; height: 0px; } .eff-5 .borders .border-bottom { bottom: 0px; right: 0px; width: 0px; height: 2px; } .eff-5 .borders .border-right { bottom: 0px; right: 0px; width: 2px; height: 0px; } .eff-5 .borders-small .border-top { top: 0px; right: 0px; width: 0px; height: 2px; } .eff-5 .borders-small .border-left { bottom: 0px; left: 0px; width: 2px; height: 0px; } .eff-5 .borders-small .border-bottom { bottom: 0px; left: 0px; width: 0px; height: 2px; } .eff-5 .borders-small .border-right { top: 0px; right: 0px; width: 2px; height: 0px; } Собираем эффект.
При наведении расширяем подложку и убираем иконку. Подробнее про transition-delay для иконки я писала для эффекта #4.
.eff-5:hover .overlay { width: 100%; height: 100%; top: 0px; left: 0px; } .eff-5:hover .overlay .icon { opacity: 0; transition-delay: 0s; } Меняем прозрачность для контейнеров с границами:
.eff-5:hover .borders, .eff-5:hover .borders-small { opacity: 1; } Определяем стили для движения границ:
.eff-5:hover .border-top, .eff-5:hover .border-bottom { width: 100%; transition-delay: 0.2s; } .eff-5:hover .border-left, .eff-5:hover .border-right { height: 100%; transition-delay: 0.2s; } Осталось проявить элементы .caption снизу вверх с большим промежутком по времени, чем с эффектом #4:
.eff-5:hover .caption h4, .eff-5:hover .caption p, .eff-5:hover .caption a { opacity: 1; } .eff-5:hover .caption h4 { transition-delay: 0.75s; } .eff-5:hover .caption p { transition-delay: 0.65s; } .eff-5:hover .caption a { transition-delay: 0.55s; } Эффект #6
Дефолтная структура дополняется одним блоком с подложкой, иконкой и границами:
<div class="effect eff-6"> <img src="img/ef6.jpg" alt="Effect #6" /> <div class="overlay"> <div class="icon"></div> <div class="borders"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Поскольку .caption появляется из центра, увеличиваясь, как и подложка, применим такие стили:
.eff-6 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transform: scale(0); transition: all 0.3s linear 0s; } У всех элементов .caption остаются дефолтные стили.
Стили для .overlay и иконки:
.eff-6 .overlay { width: 60px; height: 60px; background: rgba(255,255,255,0.6); position: absolute; top: 120px; left: 120px; transition: all 0.2s linear 0s; } .eff-6 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 18px; left: 13px; opacity: 1; transition: all 0.01s linear 0.2s; } Стили для контейнера с границами:
.eff-6 .borders { width: 90%; height: 90%; position: absolute; top: 5%; left: 5%; opacity: 0; transition: all 0.01s linear 0s; } Общие стили для всех границ:
.eff-6 .border { background: black; position: absolute; transition: all 0.4s linear 0s; } Теперь прописываем стили для каждой границы отдельно. Самое важное — это transform-origin, определяющий, относительно какой точки будет прокручиваться каждая граница:
.eff-6 .border-top { top: 0px; left: 2px; width: 100%; height: 2px; transform-origin: left top; } .eff-6 .border-left { bottom: 0px; left: 0px; width: 2px; height: 100%; transform-origin: left bottom; } .eff-6 .border-bottom { bottom: 0px; right: 2px; width: 100%; height: 2px; transform-origin: right bottom; } .eff-6 .border-right { top: 0px; right: 0px; width: 2px; height: 100%; transform-origin: right top; } Собираем эффект.
Расширяем .overlay и убираем иконку. Подробнее про transition-delay для иконки я писала для эффекта #4.
.eff-6:hover .overlay { width: 100%; height: 100%; top: 0px; left: 0px; } .eff-6:hover .overlay .icon { opacity: 0; transition-delay: 0s; } Меняем прозрачность для блока с границами:
.eff-6:hover .borders { opacity: 1; } Теперь прокручиваем границы на 90 градусов относительно заданной точки:
.eff-6:hover .border-top, .eff-6:hover .border-left, .eff-6:hover .border-bottom, .eff-6:hover .border-right { transform: rotate(90deg); transition-delay: 0.2s; } И увеличиваем .caption:
.eff-6:hover .caption { opacity: 1; transform: scale(1); transition-delay: 0.65s; } Эффект #7
В этом эффекте картинка уезжает вправо, распадаясь на пять частей. Чтобы создать иллюзию пяти кусочков, нам надо добавить в html структуру столько копий картинки, на сколько частей мы хотим ее разделить, и будем оперировать каждой картинкой как отдельным кусочком общего изображения:
<div class="effect eff-7"> <div class="img-block"> <div class="img img-1"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> <div class="img img-2"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> <div class="img img-3"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> <div class="img img-4"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> <div class="img img-5"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> </div> <div class="overlay"> <div class="icon"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Зададим стили для .img-block и для всех .img:
.eff-7 .img-block { position: relative; height: 100%; } .eff-7 .img-block .img { position: absolute; width: 100%; height: 100%; overflow: hidden; transition: all 0.2s linear 0s; } Теперь задача разместить каждый тег img и картинку внутри него так, чтобы все выглядело, как будто у нас одна картинка. Поэтому .img блоки мы будем размещать один под другим внахлест с отступом в 20%, увеличивая z-index каждому следующему, а картинку в каждом из них будем перемещать относительно самого блока на 20% выше.
Так в первом .img-блоке, располагающемся на самом верху, никаких изменений не будет, и вот его стили:
.eff-7 .img-block .img-1 { top: 0px; left: 0px; z-index: 2; } Второй блок надо опустить на 20% ниже, а картинку в нем поднять на 20% вверх:
.eff-7 .img-block .img-2 { top: 20%; left: 0px; z-index: 3; } .eff-7 .img-block .img-2 img { transform: translateY(-20%); } Третий, четвертый и пятый опускаются на 40%, 60% и 80% соответственно, картинки в них поднимаются на аналогичное количество процентов:
.eff-7 .img-block .img-3 { top: 40%; left: 0px; z-index: 4; } .eff-7 .img-block .img-3 img { transform: translateY(-40%); } .eff-7 .img-block .img-4 { top: 60%; left: 0px; z-index: 5; } .eff-7 .img-block .img-4 img { transform: translateY(-60%); } .eff-7 .img-block .img-5 { top: 80%; left: 0px; z-index: 6; } .eff-7 .img-block .img-5 img { transform: translateY(-80%); } Переходим к .caption, скрытому, благодаря z-index, под всеми картинками. Для .caption прописываем прозрачность, иначе этот блок будет на секунду виден, пока подгружаются картинки, что приведет к эффекту “мигания”.
.eff-7 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); opacity: 0; z-index: 1; transition: all 0.01s linear 0.2s; } Стили элементов .caption остаются дефолтными.
Осталось сделать только .overlay с иконкой:
.eff-7 .overlay { width: 200px; height: 200px; background: rgba(255,255,255,0.6); position: absolute; left: 70%; top: 70%; border-radius: 500px; z-index: 10; transition: all 0.2s linear 0.2s; } .eff-7 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 47px; left: 40px; } Собираем эффект.
Сначала на hover уходит вниз и вбок .overlay:
.eff-7:hover .overlay { top: 100%; left: 100%; transition-delay: 0s; } Потом все .img-блоки съезжают в сторону по одному. Ну а поскольку transition-delay, отличный от 0s, мы проставили им только на hover, обратно все блоки возвращаются одновременно, как единое целое.
.eff-7:hover .img-block .img { left: 100%; } .eff-7:hover .img-block .img-1 { transition-delay: 0.2s; } .eff-7:hover .img-block .img-2 { transition-delay: 0.3s; } .eff-7:hover .img-block .img-3 { transition-delay: 0.4s; } .eff-7:hover .img-block .img-4 { transition-delay: 0.5s; } .eff-7:hover .img-block .img-5 { transition-delay: 0.6s; } И убираем прозрачность .caption:
.eff-7:hover .caption { opacity: 1; } Эффект #8
Точно так же, как и в прошлом эффекте, у нас здесь не одна картинка, а пять картинок, ложащихся друг на друга внахлест, манипулируя ими, мы создадим иллюзию распада одной картинки на пять частей. Структура html такая:
<div class="effect eff-8"> <div class="img-block"> <div class="img img-1"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> <div class="img img-2"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> <div class="img img-3"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> <div class="img img-4"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> <div class="img img-5"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> </div> <div class="overlay"> <div class="icon"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Стили для .img-block и общие для всех .img:
.eff-8 .img-block { position: relative; height: 100%; } .eff-8 .img-block .img { position: absolute; width: 100%; height: 100%; overflow: hidden; transition: all 0.2s linear 0s; } В данном случае мы смещаем каждый .img блок на 20% ниже и левее относительно предыдущего, увеличивая ему z-index, а картинку в нем на 20% выше и правее, соответственно, образуя .img-блоками своего рода “уголок” (подробнее в эффекте #7).
.eff-8 .img-block .img-1 { top: 0px; left: 0px; z-index: 2; } .eff-8 .img-block .img-2 { top: 20%; right: 20%; z-index: 3; } .eff-8 .img-block .img-2 img { transform: translate(20%, -20%); } .eff-8 .img-block .img-3 { top: 40%; right: 40%; z-index: 4; } .eff-8 .img-block .img-3 img { transform: translate(40%, -40%); } .eff-8 .img-block .img-4 { top: 60%; right: 60%; z-index: 5; } .eff-8 .img-block .img-4 img { transform: translate(60%, -60%); } .eff-8 .img-block .img-5 { top: 80%; right: 80%; z-index: 6; } .eff-8 .img-block .img-5 img { transform: translate(80%, -80%); } Стили к .caption аналогичны стилям в эффекте #7, про необходимость прозрачности можно прочитать там же:
.eff-8 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); opacity: 0; z-index: 1; transition: all 0.01s linear 0.2s; } Прочие элементы .caption имеют дефолтные стили.
Добавляем .overlay и иконка:
.eff-8 .overlay { width: 200px; height: 200px; background: rgba(255,255,255,0.6); position: absolute; left: 70%; top: 70%; border-radius: 500px; z-index: 10; transition: all 0.2s linear 0.2s; } .eff-8 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 47px; left: 40px; } Собираем эффект.
Исчезает .overlay:
.eff-8:hover .overlay { top: 100%; left: 100%; transition-delay: 0s; } Уменьшаем прозрачность .img блокам, чтобы они исчезали по очереди:
.eff-8:hover .img-block .img { opacity: 0; } .eff-8:hover .img-block .img-1 { transition-delay: 0.25s; } .eff-8:hover .img-block .img-2 { transition-delay: 0.4s; } .eff-8:hover .img-block .img-3 { transition-delay: 0.55s; } .eff-8:hover .img-block .img-4 { transition-delay: 0.7s; } .eff-8:hover .img-block .img-5 { transition-delay: 0.85s; } Возвращаем прозрачность для .caption:
.eff-8:hover .caption { opacity: 1; } Эффект #9
В данном случае, картинка распадается на 4 части, так что у нас будет всего 4 блока с чуть более сложным позиционированием картинок внутри, чем в эффекте #7, где я подробно рассказывала, как работает этот механизм.
<div class="effect eff-9"> <div class="img-block"> <div class="img img-1"> <img src="img/ef9.jpg" alt="Effect #9" /> </div> <div class="img img-2"> <img src="img/ef9.jpg" alt="Effect #9" /> </div> <div class="img img-3"> <img src="img/ef9.jpg" alt="Effect #9" /> </div> <div class="img img-4"> <img src="img/ef9.jpg" alt="Effect #9" /> </div> </div> <div class="overlay"> <div class="icon"></div> </div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Стили для .img-block и общие для всех .img:
.eff-9 .img-block { position: relative; height: 100%; } .eff-9 .img-block .img { position: absolute; width: 100%; overflow: hidden; transition: all 0.25s linear 0s; } Теперь разместим каждый .img блок на свое место. Первый будет в левом верхнем углу, и картинку внутри мы не трогаем:
.eff-9 .img-block .img-1 { top: 0px; left: 0px; z-index: 2; height: 100%; } Второй блок поместим в правый верхний угол, а картинку сместим на 50% влево:
.eff-9 .img-block .img-2 { top: 0%; left: 50%; z-index: 3; height: 100%; } .eff-9 .img-block .img-2 img { transform: translate(-50%, 0); } Третий блок встанет внизу слева, картинку смещаем на 50% вверх:
.eff-9 .img-block .img-3 { top: 50%; left: 0%; z-index: 4; height: 100%; } .eff-9 .img-block .img-3 img { transform: translate(0%, -50%); } Ну а четвертый — внизу справа, и картинка сместится вверх и влево:
.eff-9 .img-block .img-4 { top: 50%; left: 50%; z-index: 5; height: 100%; } .eff-9 .img-block .img-4 img { transform: translate(-50%, -50%); } Таким образом, осталось только разместить .overlay и .caption аналогично эффектам #7 — #8. О необходимости прозрачности для .caption более подробно рассказано в эффекте #7.
.eff-9 .overlay { width: 200px; height: 200px; background: rgba(255,255,255,0.6); position: absolute; left: 70%; top: 70%; border-radius: 500px; z-index: 10; transition: all 0.3s linear 0s; } .eff-9 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 47px; left: 40px; } .eff-9 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); opacity: 0; z-index: 1; transition: all 0.01s linear 0.4s; } Все элементы .caption имеют дефолтные стили.
Собираем эффект.
Убираем .overlay и возвращаем непрозрачность .caption:
.eff-9:hover .overlay { top: 100%; left: 100%; transition-delay: 0s; } .eff-9:hover .caption { opacity: 1; } Теперь по одному делаем прозрачными блоки с картинками:
.eff-9:hover .img-block .img { opacity: 0; } .eff-9:hover .img-block .img-1 { transition-delay: 0.2s; } .eff-9:hover .img-block .img-2 { transition-delay: 0.4s; } .eff-9:hover .img-block .img-3 { transition-delay: 0.6s; } .eff-9:hover .img-block .img-4 { transition-delay: 0.8s; } Эффект #10
Для этого эффекта дефолтная html-структура пополнится блоком .overlay с иконкой и блоком для градиента:
<div class="effect eff-10"> <img src="img/ef10.jpg" alt="Effect #10" /> <div class="overlay"> <div class="icon"></div> </div> <div class="gradient"></div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Стили для .caption таковы, что .caption будет раскрываться из центра по вертикали.
.eff-10 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transform: scaleY(0); transition: all 0.2s linear 0s; } У элементов .caption стили — дефолтные.
Теперь стилизуем .overlay:
.eff-10 .overlay { width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); border-right: 50px solid rgba(255,255,255,0.6); position: absolute; right: 0; bottom: 0; transform-origin: right; transition: all 0.2s linear 0s; } Для Transform-origin мы выставляем значение только по оси X, ось Y нам здесь не нужна: как видим, трансформация происходит только по горизонтали.
Стили для иконки, исчезающей, как только начинается анимация .overlay, что мы выставим на hover, и возвращающейся, когда та уже почти закончилась, что мы определим прямо сейчас:
.eff-10 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 5px; transition: all 0.01s linear 0.2s; } Теперь блок с градиентом. Чтобы создать градиент, нам надо указать, во-первых, его вид, в данном случае — радиальный, во-вторых, форму для радиального градиента: круг или эллипс, и, в данном случае, это круг, ну а, в-третьих, не меньше двух цветов для перехода, первый — тот, что в центре, второй — тот, что будет по краям.
.eff-10 .gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7)); opacity: 0; transition: all 0.3s linear 0.2s; } Собираем эффект.
Сначала убираем вправо .overlay:
.eff-10:hover .overlay { transform: scaleX(0); } .eff-10:hover .overlay .icon { opacity: 0; transition-delay: 0s; } Меняем прозрачность блока с градиентом:
.eff-10:hover .gradient { opacity: 1; transition-delay: 0.2s; } Разворачиваем .caption из центра:
.eff-10:hover .caption { transform: scaleY(1); transition-delay: 0.45s; } Эффект #11
Для этого эффекта, аналогично предыдущему, html-структура дополняется блоком подложки с иконкой и блоком с градиентом:
<div class="effect eff-11"> <img src="img/ef11.jpg" alt="Effect #11" /> <div class="overlay"> <div class="icon"></div> </div> <div class="gradient"></div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> Стили для .caption:
.eff-11 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; } Элементы .caption имеют дефолтные стили.
Теперь градиентный блок. В отличие от радиального градиента, который рассматривался в эффекте #10, линейный градиент строится чуть иначе. Ему необходимо указать направление, в котором может быть один параметр, если градиент вертикальный или горизонтальный, и два параметра, если градиент диагональный. Кроме того, направление может быть задано в градусах, что более подробно рассматривается для эффекта #12. В остальном все аналогично.
Кроме того, мы масштабируем градиентный блок по оси X до нуля и устанавливаем точку, относительно которой будет происходить анимация, в крайнее левое положение, таким образом, блок будет разворачиваться слева направо, становясь в процессе все более непрозрачным:
.eff-11 .gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(to top right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%); transform: scaleX(0); opacity: 0; transform-origin: left; transition: transform 0.15s linear 0s, opacity 0.55s linear 0s; } Блок .overlay с иконкой подробнее объяснен в описании эффекта #10:
.eff-11 .overlay { width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); border-right: 50px solid rgba(255,255,255,0.6); position: absolute; right: 0; bottom: 0; transform-origin: right; transition: all 0.2s linear 0s; } .eff-11 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 5px; transition: all 0.01s linear 0.2s; } Собираем эффект.
Убираем вправо .overlay:
.eff-11:hover .overlay { transform: scaleX(0); } .eff-11:hover .overlay .icon { opacity: 0; transition-delay: 0s; } Выдвигаем блок с градиентом:
.eff-11:hover .gradient { transform: scaleX(1); opacity: 1; transition-delay: 0.2s; } И к моменту, когда блок с градиентом почти полностью получил opacity: 1; появляется .caption:
.eff-11:hover .caption { opacity: 1; transition-delay: 0.5s; } ссылка на оригинал статьи http://habrahabr.ru/post/274003/
Добавить комментарий