, наша задача - переместить их наверх и вниз соответственно и уменьшить в размерах:Effect .caption h4 {
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 20px;
margin-top: 20px;
position: relative;
top: -100%;
transform: scale(0.25);
}
.effect .caption a.btn {
width: 120px;
text-align: center;
display: block;
background: #68432d;
color: #fff;
padding: 10px 0px;
border-radius: 5px;
margin: 0px auto 0px auto;
position: relative;
top: 100%;
transform: scale(0.25);
}
Теперь надо задать transition, но тут встает такой вопрос: элементы должны сначала - опуститься и лишь после - увеличиться в размерах, то есть, нужно задать transition для опускания элементов без задержки и transition с задержкой для увеличения.
Задать больше одного стилевого свойства для transition - просто: мы всего лишь перечисляем их через запятую, не забыв указать все параметры для каждого свойства:
transition: top 0.3s linear 0s, transform 0.3s linear 0.3s;
Добавим это правило к остальным стилевым правилам:
Effect .caption h4 {
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 20px;
margin-top: 20px;
position: relative;
top: -100%;
transform: scale(0.25);
transition: top 0.3s linear 0s, transform 0.3s linear 0.3s;
}
.effect .caption a.btn {
width: 120px;
text-align: center;
display: block;
background: #68432d;
color: #fff;
padding: 10px 0px;
border-radius: 5px;
margin: 0px auto 0px auto;
position: relative;
top: 100%;
transform: scale(0.25);
transition: top 0.3s linear 0s, transform 0.3s linear 0.3s;
}
Задаем конечную точку трансформаций:
Effect:hover .caption h4,
.effect:hover .caption a.btn {
transform: scale(1);
top: 0px;
}
Осталось только скрыть.caption по образу и подобию двух предыдущих эффектов:
Effect .caption {
position: absolute;
top: 0;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
transition: all 0.3s linear 0s;
}
.effect:hover .caption {
opacity: 1;
}
Крутим элементы: rotate. Задаем “точку вращения”. Эффекты #4.1-#4.4
Чтобы “крутить” элементы, свойству transform необходимо задать значение - rotate и его параметры. Какие параметры есть у значения rotate? Во-первых, ось вращения: X, Y или Z. Во-вторых, количество градусов, на которое будет повернут элемент. Так, например, если мы хотим повернуть элемент по оси Y на 30 градусов, выглядеть правило будет следующим образом:
transform: rotateY(30deg);
Эффекты #4.1-#4.3 построены на вращении элемента.caption вокруг каждой из трех осей, и начнем мы с эффекта #4.1
, в котором.caption вращается вокруг оси X. Вот только само по себе вращение не так уж зрелищно, поэтому мы совместим его с изменением размера элемента.
,
И элементов. Изменяться будут лишь стили для.caption, и, в первую очередь, мы добавим новый transform:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
transform: rotateX(0deg);
transition: all 0.4s linear 0s;
}
.effect:hover .caption {
transform: rotateX(360deg);
}
Теперь при наведении мыши элемент крутанется на вышеобозначенное количество градусов. Но хотелось бы, чтобы он не только крутился, но и, в отсутствие hover, исчезал, а на hover не только вращался, но и “выплывал”. Для этого добавим еще один transform со значением scale. Чтобы добавить элементу два и более значений transform, не нужно писать правило дважды, мы просто ставим эти значения через пробел. И поступаем аналогично с hover-стилями:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
transform: rotateX(0deg) scale(0);
transition: all 0.4s linear 0s;
}
.effect:hover .caption {
transform: rotateX(360deg) scale(1);
}
Теперь.caption не просто вращается вокруг оси, но и словно появляется из глубины картинки.
Эффект #4.2
строится полностью аналогично, только заменяем ось вращения на Y.
Эффект #4.3
строится, опять же, полностью аналогично. Поскольку rotateZ() полностью аналогична записи rotate(), мы просто меняем стили на:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
transform: rotate(0deg) scale(0);
transition: all 0.4s linear 0s;
}
.effect:hover .caption {
transform: rotate(360deg) scale(1);
}
Эффект #4.4
сложнее. Он базируется не только на вращении и изменении размера, но еще и на изменении координат точки, вокруг которой совершается вращение, а также на усложненном значении параметра transition-timing-function свойства transition. Но начнем по порядку.
Суть в том, что вращение не может быть само по себе, оно всегда происходит относительно какой-либо точки. Дефолтные координаты этой точки - центр, то есть 50% 50%, но сейчас мы сменим их, чтобы изменить траекторию движения нашего.caption. Задаются координаты свойством transform-origin. Кроме того, давайте добавим transition со значением параметра transition-timing-function - linear:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
transform: rotate(0deg) scale(0);
transition: all 1.1s linear 0s;
}
.effect:hover .caption {
transform: rotate(360deg) scale(1);
transform-origin: -10% -20%;
}
Сейчас эффект выглядит, как очень медленное вращение.caption вокруг оси Z относительно очень смещенной точки вращения. Чтобы усложнить эффект, изменим значение transition-timing-function на cubic-bezier(0.68, -0.55, 0.27, 1.55), что даст нам очень ускоренный выход в анимацию, замедленную середину и небольшой возврат назад в конце. Вот так будет выглядеть окончательный код:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
transform: rotate(0deg) scale(0);
transition: all 1.1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}
.effect:hover .caption {
transform: rotate(360deg) scale(1);
transform-origin: -10% -20%;
}
Еще немного о scale и transform-origin. Эффекты #5.1-#5.4
Как я уже писала в разборе эффектов #3.1-#3.3, мы можем применять scale не только по двум осям одновременно, увеличивая/уменьшая элемент одновременно в длину и ширину, но и по одной оси. Так, например, в эффекте #5.1
мы видим, как.caption разворачивается из центра по горизонтали, но высота его при этом не меняется.
Для этого элемента html-структура и стили для
,
И остаются базовыми. Изменятся только стили для.caption, который нам надо уменьшить только по оси X:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
transform: scaleX(0);
transition: all 0.4s linear 0s;
}
И, чтобы произошло увеличение, на hover:
Effect:hover .caption {
transform: scaleX(1);
}
Эффект #5.2
строится аналогично, только.caption развернется по оси Y, в остальном стили останутся аналогичны предыдущему.
В эффекте #5.3
.caption тоже разворачивается по горизонтали, но не из центра, а от левого края. Чтобы подвинуть точку, от которой происходит переход, применим transform-origin, который, как видим, работает не только в связке с rotate:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
transform: scaleX(0);
transform-origin: left center;
transition: all 0.4s linear 0s;
}
Таким образом, мы смещаем точку, от которой происходит переход, по горизонтали в крайнее левое положение, а по вертикали она так и остается в дефолтном положении - по центру. Прочие стили остаются аналогичными.
Эффект #5.4
аналогичен эффекту #5.3, здесь.caption разворачивается сверху вниз, от верхнего края:
.effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
transform: scaleX(0);
transform-origin: center top;
transition: all 0.4s linear 0s;
}
Точка смещена в крайнее верхнее положение, по горизонтали же - остается по центру. Прочие стили аналогичны.
Как еще можно использовать связку rotate и transform-origin. Эффекты #6.1-#6.3
В эффекте #6.1
при наведении мыши.caption проворачивается, как если бы был закреплен на невидимом гвоздике. Роль “гвоздика” выполняет transform-origin с заданными координатами, а поворот обеспечивает rotate.
Html-структура остается базовой, равно как и стили для
,
И . Изменяем только стили для.caption. Давайте, для начала, добавим rotate:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
transform: rotate(180deg);
transition: all 0.4s cubic-bezier(0.4, 0, 1, 1) 0s;
}
Теперь.caption оказывается просто повернут вверх ногами. Пусть на hover он будет возвращаться в исходное положение:
.effect:hover .caption {
transform: rotate(0deg);
}
Теперь, при наведении мыши, .caption просто прокручивается вокруг своей оси. Но, если мы изменим координаты точки, вокруг которой происходит переход, и, как в данном случае, перенесем ее наверх по вертикали таким образом:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
transform: rotate(180deg);
transform-origin: center top;
transition: all 0.4s cubic-bezier(0.4, 0, 1, 1) 0s;
}
Получится следующее: .caption сместится наверх, как если бы мы ему дали top: -100%; потому что сместилась точка, относительно которой он вращается.
Теперь, если мы будем смещать координаты “точки перехода” и изменять направление вращение, то сможем получить различные вариации этого эффекта. Так, например, эффект #6.2
почти полностью аналогичен предыдущему, только transform-origin: center bottom;
а направление вращения изменено на противоположное благодаря тому, что исходное значение стало таким transform: rotate(-180deg);
В эффекте #6.3
направление вращения остается таким же, как в #6.2, а “точка перехода” смещена на середину правой стороны контейнера: transform-origin: right center;
В остальном, стили остаются теми же самыми.
Поговорим подробнее о delay. Эффекты #7.1-#7.3
Сейчас мы немного нарушим порядок разбора эффектов и начнем с эффекта #7.2, потом перейдем к #7.3, и лишь потом вернемся к #7.1 как к самому сложному из линейки.
Итак, эффект #7.2
: при наведении мыши сверху и снизу выезжают два контейнера.overlay и, когда смыкаются, сверху выезжает.caption.
Html-структура понадобится такая:
Title is Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
View More
Как видите, у нас добавилось два.overlay-слоя, тех самых, что будут выезжать сверху и снизу. Что касается стилей: для
,
И стили остаются дефолтные.
Теперь давайте рассмотрим стили для.overlay-контейнеров:
Effect .overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 50%;
left: 0px;
position: absolute;
transition: all 0.15s linear 0s;
}
.effect .overlay-top {
top: -100%;
}
.effect .overlay-bottom {
top: 100%;
}
.overlay-top мы убрали вверх, .overlay-bottom - соответственно, вниз, теперь нам нужно, чтобы при наведении мыши они съезжались. Поскольку каждый из них имеет высоту, равную 50% высоты родителя, сделать это просто:
Effect:hover .overlay-top {
top: 0px;
}
.effect:hover .overlay-bottom {
top: 50%;
}
Теперь определим вид и поведение.caption, который у нас тоже спускается сверху, а значит, должен быть наверх помещен. Теперь, поскольку.caption появляется после.overlay, было бы логично, что у него будет проставлено значение параметра delay свойства transition:
Effect .caption {
position: absolute;
top: -100%;
left: 0px;
background: transparent;
width: 100%;
height: 100%;
color: #fff;
transition: all 0.2s linear 0.3s;
}
.effect:hover .caption {
top: 0px;
}
Давайте проверим, как это сработает. Какой выходит результат по шагам:
- Наводим мышь на.effect
- Выезжают.overlay
- Появляется.caption
- Снимаем hover
- .overlay возвращаются на свои места
- .caption, благодаря выставленному значению delay, возвращается на место на 0.3s позже, что совсем не входило в наши планы
Выходит, что delay, определенный для.caption, срабатывает, но не с тем результатом, с каким бы нам этого хотелось. Что тут можно сделать? Мы можем задавать delay не только в стилях самого элемента, но и в стилях его поведения на hover, и в этом будет заключаться наш трюк. Как должны себя вести элементы на hover? Сначала выезжают.overlay и только потом.caption, это значит, что в состоянии hover у.overlay задержка равняется 0s, а у.caption - например, 0.3s
Effect:hover .caption {
top: 0px;
transition-delay: 0.3s;
}
.effect:hover .overlay {
transition-delay: 0s;
}
Но, когда мы снимаем hover, элементы возвращаются к своему обычному поведению, при котором сначала, без всякой задержки, на место возвращается.caption, а затем - .overlay, и, значит, у первого мы должны задержку отменить, а вторым - добавить:
Effect .caption {
position: absolute;
top: -100%;
left: 0px;
background: transparent;
width: 100%;
height: 100%;
color: #fff;
transition: all 0.2s linear 0s;
}
.effect .overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 50%;
left: 0px;
position: absolute;
transition: all 0.15s linear 0.3s;
}
Вот теперь очередность будет соблюдена, и элементы будут двигаться в правильном порядке.
Эффект #7.3
почти аналогичен предыдущему, разница лишь в стилях для.overlay:
Effect .overlay {
background: rgba(0,0,0,0.7);
width: 50%;
height: 100%;
position: absolute;
transition: all 0.15s linear 0.4s;
}
.effect .overlay-top {
left: 0;
top: -100%;
}
.effect .overlay-bottom {
right: 0;
top: 100%;
}
.effect:hover .overlay {
top: 0;
transition-delay: 0s;
}
С эффектом #7.1
придется повозиться чуть дольше. Как и #7.3, он отличается от #7.2 только положением и стилями для.overlay, выезжающими сверху справа и снизу слева двумя треугольниками.
Но, конечно, выезжать у нас будут не треугольники, а прямоугольники. Вот общие стили для обоих.overlay:
Effect .overlay {
background: rgba(0,0,0,0.7);
width: 408px;
height: 170px;
position: absolute;
transform: rotate(33deg);
transition: all 0.15s linear 0.3s;
}
Вот что важно: ширина и высота прямоугольников должна индивидуально подгоняться под размер вашего контейнера с эффектом, равно как и координаты, на которые мы их поместим (и на которые потом передвинем). Что мы делаем: берем наши прямоугольники, разворачиваем на 33 градуса каждый, верхний смещаем к верхнему правому углу контейнера.effect, нижний - к нижнему левому соответственно, а на hover смещаем их до соприкосновения по линии диагонали прямоугольника контейнера.effect:
Effect .overlay-top {
top: -158px;
left: 142px;
}
.effect:hover .overlay-top {
top: -50px;
left: -1px;
}
.effect .overlay-bottom {
top: 192px;
left: -244px;
}
.effect:hover .overlay-bottom {
top: 79px;
left: -111px;
}
.effect:hover .overlay {
transition-delay: 0s;
}
Прочие стили идентичны стилям предыдущих эффектов.
Применяем полученные навыки на практике. Больше трюков! Эффекты #8.1-#10.3
Изюминку этих эффектов составляет bounce-эффект, строящийся на значении параметра transition-timing-function свойства transition для.overlay.
Html-структура такова:
Title is Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
View More
В данном случае.overlay понадобится всего один. Вот такие понадобятся для него стили:Effect .overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
transform: scale(0);
transition: all 0.4s cubic-bezier(0, 1.31, 1, -0.29) 0.4s;
}
Ну а на hover увеличиваем его:
Effect:hover .overlay {
transform: scale(1);
transition-delay: 0s;
}
Чтобы.caption не отвлекал, все, что мы пропишем для него - это изменение прозрачности:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
transition: all 0.2s linear 0s;
}
.effect:hover .caption {
opacity: 1;
transition-delay: 0.6s;
}
Прочие стили остаются дефолтными.
Эффекты #8.2-#8.3
строятся аналогично. Вся разница лишь в том, что в #8.2 используется scaleX(), а в #8.3 - scaleY(), о которых я подробно рассказывала при разборе эффектов #3.1-#3.3
Эффект #9.1
строится на том, что два.overlay появляются по очереди из центра, а следом за ними с небольшим bounce-эффектом выезжает.caption.
Что касается html-структуры, она такова:
Title is Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
View More
Стили для ,
И остаются неизменными. Рассмотрим стили для.overlay:
Effect .overlay {
background: rgba(0,0,0,0.35);
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
transform: scale(0);
}
Поскольку.overlay-1 и.overlay-2 вступают в разное время, transition им дадим каждому - свой:
Effect .overlay-1 {
transition: all 0.2s linear 0.3s;
}
.effect .overlay-2 {
transition: all 0.2s linear 0.6s;
}
.effect:hover .overlay {
transform: scale(1);
}
Соответственно, и при снятии hover исчезают они с задержкой относительно друг друга. Поэтому для.overlay-1 мы проставим delay: 0s, а для.overlay-2 - delay: 0.2s (подробнее о влиянии delay на очередность появления и исчезновения элементов я писала при разборе эффектов #7.1-#7.3)
Effect:hover .overlay-1 {
transition-delay: 0s;
}
.effect:hover .overlay-2 {
transition-delay: 0.2s;
}
Осталось рассмотреть стили.caption:
Effect .caption {
position: absolute;
top: 0px;
left: 100%;
background: transparent;
width: 100%;
height: 100%;
color: #fff;
transition: all 0.4s cubic-bezier(0.05, -0.24, 0, 1.33) 0s;
}
.effect:hover .caption {
left: 0px;
transition-delay: 0.4s;
}
Эффект #9.2
строится аналогично, только.overlay круглые и.caption, как и.overlay, появляется из центра:
Effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
width: 100%;
height: 100%;
color: #fff;
transition: all 0.3s linear 0s;
transform: scale(0);
}
.effect:hover .caption {
transform: scale(1);
transition-delay: 0.4s;
}
.effect .overlay {
background: rgba(0,0,0,0.35);
width: 2px;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: scale(0);
}
.effect .overlay-1 {
transition: all 0.5s linear 0.3s;
}
.effect .overlay-2 {
transition: all 0.5s linear 0.6s;
}
Прочие стили аналогичны стилям эффекта #9.1
Эффект #9.3
строится следующим образом. Нужна такая html-структура:
Title is Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
View More
