При создании этого мануала, моей целью было взять три десятка различных эффектов, частью — довольно распространенных, частью — придуманных мной, разместить их от простых к более сложным, и на их примере показать новичкам, никогда не имевшим дело с CSS3 возможностями, как эти возможности работают и как их применить на практике. Именно по этой причине статья вышла подробная, пошаговая, мне было важно описать и разобрать каждую деталь.
Демо материалы лежат здесь.
Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.
Подготовка к работе.
Итак, для того, чтобы создавать наши эффекты нам понадобится вот такая простая дефолтная html-структура:
Для большей части эффектов она останется неизменна, но кое-где нам придется внести ряд изменений. У нас есть div-контейнер с классом .effect, внутри которого помещаем картинку и контейнер с классом .caption, содержащий заголовок, описание и, как в данном случае, кнопку “View More”. Разумеется, структуру менять можно, главное, тогда сделать соответствующие изменения и для CSS-кода.
Дефолтные css-стили для нашей структуры (опять же, в зависимости от того, какой мы будем рассматривать эффект, они будут различаться):
Пример
Эффект #1.1 заключается в том, что, при наведении мыши на изображение, сверху “выезжает” контейнер .caption с информацией.
Чтобы этого добиться, нужно, в первую очередь, переместить этот контейнер выше, за пределы контейнера с эффектом. Для этого мы изменим ему свойство top, и стили для блока теперь будут выглядеть так:
Следующим шагом будет добавление к .caption свойства transition. transition показывает, какое именно свойство будет изменяться, насколько быстро, с какой задержкой.
Рассмотрим его поподробнее. Вот так должно будет выглядеть свойство transition для эффекта #1.1:
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
Первое значение устанавливает имя стилевого свойства, которое будет отслеживаться для изменения. В данном случае мы выставили all — отслеживаться будут все свойства. Второе — отвечает за время, необходимое для анимации. Третье — за то, как в течение времени, заданного вторым свойством, будет распределяться скорость перехода: где замедлится, где ускорится. Так, например, в данном случае сначала анимация будет быстрее, к середине замедлится и ближе к концу выйдет на равномерную скорость. Четвертое значение определяет, начнется анимация с задержкой или нет. Если значение равно 0s — задержки нет.
Кроме того, для этого свойства нам надо будет добавить вендорные префиксы. необходимые для корректного отображения анимации в браузерах. Как это выглядит:
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Chrome и Safari
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Opera
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для IE
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Firefox
Добавим и их:
В статье, для краткости, я буду опускать префиксы, но не забывайте добавлять их для таких свойств, как transition, transform и transform-origin. В коде примеров под кнопкой CSS (или в самих файлах) префиксы тоже есть.
Итак, мы добавили почти все, что необходимо для создания эффекта: начальные условия и условия перехода в конечную точку, осталось добавить только стили для самой конечной точки.
Эффект #1.2 строится аналогично, только .caption “выезжает” справа налево. Для этого мы вносим незначительные изменения в стили .caption:
А вот в эффекте #1.3 внесены небольшие усложнения. Так .caption движется, как в эффекте #1.1 сверху вниз, но одновременно ему навстречу снизу вверх выдвигается еще один блок.
Чтобы добиться такого эффекта, внесем изменения в html-структуру. Нам необходимо создать пустой div-контейнер с классом .overlay для блока, выезжающего снизу вверх:
Внесем изменения в стили для .caption. Изменим его положение для выдвижения сверху вниз, уменьшим прозрачность вдвое, чтобы сохранить итоговое значение прозрачности фона (в конечном итоге, у нас будут накладываться друг на друга два блока), добавим z-index, чтобы показать, какой из двух блоков будет “выше” при наложении:
Добавим стили для .overlay.
Осталось только определить конечную точку трансформаций: .caption опускается до top: 0px, а .overlay, наоборот, поднимается до этого же значения:
Пример
В эффекте #2.1 элементы выдвигаются из центра к краям. Воспользуемся базовой html-структурой, в которую, для создания этого эффекта, не понадобится вносить никаких изменений.
А вот в css-стили изменения внести понадобится. В первую очередь, необходимо сместить заголовок и кнопку в центр .caption, чтобы задать начальную точку для последующего перехода. Кроме того, необходимо добавить этим элементам свойство transition, поскольку сейчас именно они являются объектами анимирования:
Теперь, если мы зададим конечную точку анимации:
мы получим не самый красивый результат. Полупрозрачная подложка никуда не делась, элементы кучкуются в центре и неэстетично оттуда разъезжаются. Поскольку, с помощью transition, можно изменять не только положение элемента, но и, например, его прозрачность, благодаря ей мы сможем скрыть и подложку, и элементы в центре до момента, пока не понадобится их подвинуть.
Добавляем прозрачность и transition к .caption:
Таким образом, сейчас .caption мы спрятали, и чуть позже настроим так, чтобы он появлялся только при наведении мыши. Необходимо добавить прозрачность и для всех элементов внутри .caption, и код для них будет выглядеть так:
Теперь на hover будет происходить следующее: прозрачность .caption и элементов внутри нее сменится с opacity: 0 на opacity: 1, одновременно с чем начнет меняться местоположение заголовка и кнопки:
Эффекты #2.2 и #2.3 построены аналогичным образом, только для эффекта #2.2 заголовок и кнопку мы смещаем сверху вниз и снизу вверх соответственно, а для эффекта #2.3 справа налево и слева направо соответственно.
Изменения, которые необходимо внести в код эффекта #2.1, чтобы получить эффект #2.2:
В остальном, все остается аналогичным.
Ну а чтобы из эффекта #2.1 получить эффект #2.3, изменим следующее:
Пример
Эффект #3.1 строится на том, что, при наведении, появляются очень увеличенные элементы <h4>, <p> и <a>, постепенно уменьшающиеся до нормальных размеров.
html-структуру оставляем базовой. Что касается изменений в таблице стилей, уменьшающимся элементам мы должны добавить свойство transform. Transform позволяет трансформировать элементы: вращать, менять им размеры, наклонять, перемещать, комбинировать несколько свойств для создания более сложных эффектов. Для этих эффектов мы разберем уменьшение/увеличение элементов.
Необходимое для такой трансформации значение свойства transform — scale(x,y), где значение x — изменение размеров объекта по горизонтали, а y — по вертикали соответственно. Если мы применим это свойство для <h4>, <p> и <a>, то получим вот что:
Как видите, у значения scale в данном случае не два параметра, а один, и это означает, что и по горизонтали, и по вертикали наш элемент увеличен в два раза.
Теперь на hover наша задача уменьшить эти элементы до их нормального размера, что мы и делаем, добавляя эти стили:
Что касается .caption, как и в разборе эффектов #2.1-#2.3, мы выставляем ему opacity: 0 и очень маленькое время transition, чтобы появление подложки не отвлекало зрителя от основной анимации:
Эффект #3.2 строится аналогично предыдущему, с тем лишь исключением, что элементы не уменьшаются, а увеличиваются при наведении мыши. Выставим для них такое значение scale: 0.25, все прочие стили остаются аналогичны.
А вот эффект #3.3 — это комбинация из перемещения элементов и изменения их размеров. Как видим, элемент <p> остается на своем месте и размеры не меняет, для него стили остаются стандартные. Что касается <h4> и <a>, наша задача — переместить их наверх и вниз соответственно и уменьшить в размерах:
Теперь надо задать transition, но тут встает такой вопрос: элементы должны сначала — опуститься и лишь после — увеличиться в размерах, то есть, нужно задать transition для опускания элементов без задержки и transition с задержкой для увеличения.
Задать больше одного стилевого свойства для transition — просто: мы всего лишь перечисляем их через запятую, не забыв указать все параметры для каждого свойства:
transition: top 0.3s linear 0s, transform 0.3s linear 0.3s;
Добавим это правило к остальным стилевым правилам:
Задаем конечную точку трансформаций:
Осталось только скрыть .caption по образу и подобию двух предыдущих эффектов:
Пример
Чтобы “крутить” элементы, свойству transform необходимо задать значение — rotate и его параметры. Какие параметры есть у значения rotate? Во-первых, ось вращения: X, Y или Z. Во-вторых, количество градусов, на которое будет повернут элемент. Так, например, если мы хотим повернуть элемент по оси Y на 30 градусов, выглядеть правило будет следующим образом:
transform: rotateY(30deg);
Эффекты #4.1-#4.3 построены на вращении элемента .caption вокруг каждой из трех осей, и начнем мы с эффекта #4.1, в котором .caption вращается вокруг оси X. Вот только само по себе вращение не так уж зрелищно, поэтому мы совместим его с изменением размера элемента.
html-структура остается базовой, равно как и стили для <h4>, <p> и <a> элементов. Изменяться будут лишь стили для .caption, и, в первую очередь, мы добавим новый transform:
Теперь при наведении мыши элемент крутанется на вышеобозначенное количество градусов. Но хотелось бы, чтобы он не только крутился, но и, в отсутствие hover, исчезал, а на hover не только вращался, но и “выплывал”. Для этого добавим еще один transform со значением scale. Чтобы добавить элементу два и более значений transform, не нужно писать правило дважды, мы просто ставим эти значения через пробел. И поступаем аналогично с hover-стилями:
Теперь .caption не просто вращается вокруг оси, но и словно появляется из глубины картинки.
Эффект #4.2 строится полностью аналогично, только заменяем ось вращения на Y.
Эффект #4.3 строится, опять же, полностью аналогично. Поскольку rotateZ() полностью аналогична записи rotate(), мы просто меняем стили на:
Эффект #4.4 сложнее. Он базируется не только на вращении и изменении размера, но еще и на изменении координат точки, вокруг которой совершается вращение, а также на усложненном значении параметра transition-timing-function свойства transition. Но начнем по порядку.
Суть в том, что вращение не может быть само по себе, оно всегда происходит относительно какой-либо точки. Дефолтные координаты этой точки — центр, то есть 50% 50%, но сейчас мы сменим их, чтобы изменить траекторию движения нашего .caption. Задаются координаты свойством transform-origin. Кроме того, давайте добавим transition со значением параметра transition-timing-function — linear:
Сейчас эффект выглядит, как очень медленное вращение .caption вокруг оси Z относительно очень смещенной точки вращения. Чтобы усложнить эффект, изменим значение transition-timing-function на cubic-bezier(0.68, -0.55, 0.27, 1.55), что даст нам очень ускоренный выход в анимацию, замедленную середину и небольшой возврат назад в конце. Вот так будет выглядеть окончательный код:
Пример
Как я уже писала в разборе эффектов #3.1-#3.3, мы можем применять scale не только по двум осям одновременно, увеличивая/уменьшая элемент одновременно в длину и ширину, но и по одной оси. Так, например, в эффекте #5.1 мы видим, как .caption разворачивается из центра по горизонтали, но высота его при этом не меняется.
Для этого элемента html-структура и стили для <h4>, <p> и <a> остаются базовыми. Изменятся только стили для .caption, который нам надо уменьшить только по оси X:
И, чтобы произошло увеличение, на hover:
Эффект #5.2 строится аналогично, только .caption развернется по оси Y, в остальном стили останутся аналогичны предыдущему.
В эффекте #5.3 .caption тоже разворачивается по горизонтали, но не из центра, а от левого края. Чтобы подвинуть точку, от которой происходит переход, применим transform-origin, который, как видим, работает не только в связке с rotate:
Таким образом, мы смещаем точку, от которой происходит переход, по горизонтали в крайнее левое положение, а по вертикали она так и остается в дефолтном положении — по центру. Прочие стили остаются аналогичными.
Эффект #5.4 аналогичен эффекту #5.3, здесь .caption разворачивается сверху вниз, от верхнего края:
Точка смещена в крайнее верхнее положение, по горизонтали же — остается по центру. Прочие стили аналогичны.
Пример
В эффекте #6.1 при наведении мыши .caption проворачивается, как если бы был закреплен на невидимом гвоздике. Роль “гвоздика” выполняет transform-origin с заданными координатами, а поворот обеспечивает rotate.
html-структура остается базовой, равно как и стили для <h4>, <p> и <a>. Изменяем только стили для .caption. Давайте, для начала, добавим rotate:
Теперь .caption оказывается просто повернут вверх ногами. Пусть на hover он будет возвращаться в исходное положение:
Теперь, при наведении мыши, .caption просто прокручивается вокруг своей оси. Но, если мы изменим координаты точки, вокруг которой происходит переход, и, как в данном случае, перенесем ее наверх по вертикали таким образом:
Получится следующее: .caption сместится наверх, как если бы мы ему дали top: -100%; потому что сместилась точка, относительно которой он вращается.
Теперь, если мы будем смещать координаты “точки перехода” и изменять направление вращение, то сможем получить различные вариации этого эффекта. Так, например, эффект #6.2 почти полностью аналогичен предыдущему, только transform-origin: center bottom; а направление вращения изменено на противоположное благодаря тому, что исходное значение стало таким transform: rotate(-180deg);
В эффекте #6.3 направление вращения остается таким же, как в #6.2, а “точка перехода” смещена на середину правой стороны контейнера: transform-origin: right center; В остальном, стили остаются теми же самыми.
Пример
Сейчас мы немного нарушим порядок разбора эффектов и начнем с эффекта #7.2, потом перейдем к #7.3, и лишь потом вернемся к #7.1 как к самому сложному из линейки.
Итак, эффект #7.2: при наведении мыши сверху и снизу выезжают два контейнера .overlay и, когда смыкаются, сверху выезжает .caption.
html-структура понадобится такая:
Как видите, у нас добавилось два .overlay-слоя, тех самых, что будут выезжать сверху и снизу.
Что касается стилей: для <h4>, <p> и <a> стили остаются дефолтные.
Теперь давайте рассмотрим стили для .overlay-контейнеров:
.overlay-top мы убрали вверх, .overlay-bottom — соответственно, вниз, теперь нам нужно, чтобы при наведении мыши они съезжались. Поскольку каждый из них имеет высоту, равную 50% высоты родителя, сделать это просто:
Теперь определим вид и поведение .caption, который у нас тоже спускается сверху, а значит, должен быть наверх помещен. Теперь, поскольку .caption появляется после .overlay, было бы логично, что у него будет проставлено значение параметра delay свойства transition:
Давайте проверим, как это сработает. Какой выходит результат по шагам:
Выходит, что delay, определенный для .caption, срабатывает, но не с тем результатом, с каким бы нам этого хотелось. Что тут можно сделать?
Мы можем задавать delay не только в стилях самого элемента, но и в стилях его поведения на hover, и в этом будет заключаться наш трюк. Как должны себя вести элементы на hover? Сначала выезжают .overlay и только потом .caption, это значит, что в состоянии hover у .overlay задержка равняется 0s, а у .caption — например, 0.3s
Но, когда мы снимаем hover, элементы возвращаются к своему обычному поведению, при котором сначала, без всякой задержки, на место возвращается .caption, а затем — .overlay, и, значит, у первого мы должны задержку отменить, а вторым — добавить:
Вот теперь очередность будет соблюдена, и элементы будут двигаться в правильном порядке.
Эффект #7.3 почти аналогичен предыдущему, разница лишь в стилях для .overlay:
С эффектом #7.1 придется повозиться чуть дольше. Как и #7.3, он отличается от #7.2 только положением и стилями для .overlay, выезжающими сверху справа и снизу слева двумя треугольниками.
Но, конечно, выезжать у нас будут не треугольники, а прямоугольники. Вот общие стили для обоих .overlay:
Вот что важно: ширина и высота прямоугольников должна индивидуально подгоняться под размер вашего контейнера с эффектом, равно как и координаты, на которые мы их поместим (и на которые потом передвинем). Что мы делаем: берем наши прямоугольники, разворачиваем на 33 градуса каждый, верхний смещаем к верхнему правому углу контейнера .effect, нижний — к нижнему левому соответственно, а на hover смещаем их до соприкосновения по линии диагонали прямоугольника контейнера .effect:
Прочие стили идентичны стилям предыдущих эффектов.
#8.1-#8.3
Пример
Изюминку этих эффектов составляет bounce-эффект, строящийся на значении параметра transition-timing-function свойства transition для .overlay.
html-структура такова:
В данном случае .overlay понадобится всего один. Вот такие понадобятся для него стили:
Ну а на hover увеличиваем его:
Чтобы .caption не отвлекал, все, что мы пропишем для него — это изменение прозрачности:
Прочие стили остаются дефолтными.
Эффекты #8.2-#8.3 строятся аналогично. Вся разница лишь в том, что в #8.2 используется scaleX(), а в #8.3 — scaleY(), о которых я подробно рассказывала при разборе эффектов #3.1-#3.3
#9.1-#9.3
Пример
Эффект #9.1 строится на том, что два .overlay появляются по очереди из центра, а следом за ними с небольшим bounce-эффектом выезжает .caption.
Что касается html-структуры, она такова:
Стили для <h4>, <p> и <a> остаются неизменными. Рассмотрим стили для .overlay:
Поскольку .overlay-1 и .overlay-2 вступают в разное время, transition им дадим каждому — свой:
Соответственно, и при снятии hover исчезают они с задержкой относительно друг друга. Поэтому для .overlay-1 мы проставим delay: 0s, а для .overlay-2 — delay: 0.2s (подробнее о влиянии delay на очередность появления и исчезновения элементов я писала при разборе эффектов #7.1-#7.3)
Осталось рассмотреть стили .caption:
Эффект #9.2 строится аналогично, только .overlay круглые и .caption, как и .overlay, появляется из центра:
Прочие стили аналогичны стилям эффекта #9.1
Эффект #9.3 строится следующим образом. Нужна такая html-структура:
Чтобы добиться такого вида для .overlay, мы дадим ему постепенно увеличивающуюся box-shadow:
Изначальное положение для .caption будет: разворот на 180 градусов и opacity: 0. На hover разворачиваем .caption, который, в процессе поворота, становится непрозрачным:
Все остальные стили — дефолтные.
#10.1-#10.3
Пример
Эффект #10.1 состоит из пяти меняющих размер “лесенкой” элементов .overlay и, словно выныривающего, .caption.
html-структура нужна такая:
Сначала построим “лесенку”. Каждый .overlay отличается от другого своим местоположением и значением параметра delay:
На hover их delay тоже будут различаться:
Самое интересное и сложное здесь — .caption. Вот базовые стили для него:
Теперь нам нужно задать ему положение до начала анимации. Во-первых, развернуть, ведь, когда мы наводим мышь, мы видим, как .caption проворачивается на некоторый угол. Зададим и transform-origin, определяющий точку, вокруг которой будет проходить трансформация. Добавим transform: rotate(-50deg); и transform-origin: 0% 100%;. Следующим шагом будет смещение по вертикали и по горизонтали, чтобы чуть позже обеспечить “выныривание”. Смещать будем с помощью transform: translate(x,y), который сдвигает элемент по оси X и Y соответственно. Наша задача — сдвинуть .caption почти в самый угол по горизонтали и примерно на две трети за пределы контейнера .effects по вертикали:
Теперь нам нужно совсем скрыть .caption до тех пор, пока на контейнер с эффектом не наведут мышь. В этот раз мы спрячем с помощью height: 0px; и overflow: hidden;. Конечные стили такие:
Теперь, чтобы проявить .caption на hover, восстановим его высоту, повернем до rotate(0deg) и вернем на место по горизонтали и вертикали:
Стили для <h4>, <p> и <a> остаются дефолтными.
Эффект #10.2 строится на двух .overlay, выезжающих из верхнего левого и правого нижнего угла соответственно, а также на “выпадании” сверху элементов <h4>, <p> и <a>.
html-структура нужна такая:
Начнем с левого верхнего .overlay, раскрывающегося полупрозрачной подложкой:
Интереснее с нижним правым. Поскольку ширина border равна 4px, просто задать ширине и высоте по 100% недостаточно, нужно компенсировать по 8px по вертикали и по горизонтали, чем нам и поможет calc:
Теперь перейдем к .caption и его содержимому. Для .caption стили остаются дефолтными, изменятся они для перемещаемых элементов <h4>, <p> и <a>, каждый из которых необходимо сместить наверх. Чтобы заголовок не налезал на border подчеркиванием, рассчитаем ему ширину, как и .overlay-2:
Осталось лишь, чтоб элементы опускались на hover, причем в установленном нами порядке:
Эффект #10.3 состоит из увеличивающейся картинки и изменения угла поворота .caption на hover.
html-структура нужна дефолтная, равно как и стили для <h4>, <p> и <a>. А начнем мы с увеличения картинки:
Ну а что касается .caption — задача в том, чтобы, развернув его на 30 градусов, совместить его правый нижний угол с правым нижним углом картинки и заставить исчезнуть с помощью понижения прозрачности. А его transition, состоит из двух частей:
Надеюсь, эта статья оказалась для вас полезной и интересной!
Демо материалы лежат здесь.
Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.
Подготовка к работе.
Итак, для того, чтобы создавать наши эффекты нам понадобится вот такая простая дефолтная html-структура:
<div class="effect>
<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>
Для большей части эффектов она останется неизменна, но кое-где нам придется внести ряд изменений. У нас есть div-контейнер с классом .effect, внутри которого помещаем картинку и контейнер с классом .caption, содержащий заголовок, описание и, как в данном случае, кнопку “View More”. Разумеется, структуру менять можно, главное, тогда сделать соответствующие изменения и для CSS-кода.
Дефолтные css-стили для нашей структуры (опять же, в зависимости от того, какой мы будем рассматривать эффект, они будут различаться):
.effect {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.effect img {
width: 100%;
height: 100%;
}
.effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
}
.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;
}
.effect .caption p {
margin: 15px 0px;
text-align: center;
font-style: italic;
padding: 0px 10px;
}
.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;
}
Основы свойства transition. Эффекты #1.1-1.3
Пример
Эффект #1.1 заключается в том, что, при наведении мыши на изображение, сверху “выезжает” контейнер .caption с информацией.
Чтобы этого добиться, нужно, в первую очередь, переместить этот контейнер выше, за пределы контейнера с эффектом. Для этого мы изменим ему свойство top, и стили для блока теперь будут выглядеть так:
.effect .caption {
position: absolute;
top: -100%;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
}
Следующим шагом будет добавление к .caption свойства transition. transition показывает, какое именно свойство будет изменяться, насколько быстро, с какой задержкой.
Рассмотрим его поподробнее. Вот так должно будет выглядеть свойство transition для эффекта #1.1:
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
Первое значение устанавливает имя стилевого свойства, которое будет отслеживаться для изменения. В данном случае мы выставили all — отслеживаться будут все свойства. Второе — отвечает за время, необходимое для анимации. Третье — за то, как в течение времени, заданного вторым свойством, будет распределяться скорость перехода: где замедлится, где ускорится. Так, например, в данном случае сначала анимация будет быстрее, к середине замедлится и ближе к концу выйдет на равномерную скорость. Четвертое значение определяет, начнется анимация с задержкой или нет. Если значение равно 0s — задержки нет.
Кроме того, для этого свойства нам надо будет добавить вендорные префиксы. необходимые для корректного отображения анимации в браузерах. Как это выглядит:
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Chrome и Safari
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Opera
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для IE
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Firefox
Добавим и их:
.effect .caption {
position: absolute;
top: -100%;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
}
В статье, для краткости, я буду опускать префиксы, но не забывайте добавлять их для таких свойств, как transition, transform и transform-origin. В коде примеров под кнопкой CSS (или в самих файлах) префиксы тоже есть.
Итак, мы добавили почти все, что необходимо для создания эффекта: начальные условия и условия перехода в конечную точку, осталось добавить только стили для самой конечной точки.
.effect:hover .caption {
top: 0px;
}
Эффект #1.2 строится аналогично, только .caption “выезжает” справа налево. Для этого мы вносим незначительные изменения в стили .caption:
.effect .caption {
position: absolute;
top: 0px;
left: 100%;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
}
.effect:hover .caption {
left: 0px;
}
А вот в эффекте #1.3 внесены небольшие усложнения. Так .caption движется, как в эффекте #1.1 сверху вниз, но одновременно ему навстречу снизу вверх выдвигается еще один блок.
Чтобы добиться такого эффекта, внесем изменения в html-структуру. Нам необходимо создать пустой div-контейнер с классом .overlay для блока, выезжающего снизу вверх:
<div class="effect>
<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 class="overlay"></div>
</div>
Внесем изменения в стили для .caption. Изменим его положение для выдвижения сверху вниз, уменьшим прозрачность вдвое, чтобы сохранить итоговое значение прозрачности фона (в конечном итоге, у нас будут накладываться друг на друга два блока), добавим z-index, чтобы показать, какой из двух блоков будет “выше” при наложении:
effect .caption {
position: absolute;
top: -100%;
left: 0px;
background: rgba(0,0,0,0.35);
width: 100%;
height: 100%;
color: #fff;
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
z-index: 10;
}
Добавим стили для .overlay.
.effect .overlay {
position: absolute;
top: 100%;
left: 0px;
background: rgba(0,0,0,0.35);
width: 100%;
height: 100%;
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
z-index: 5;
}
Осталось только определить конечную точку трансформаций: .caption опускается до top: 0px, а .overlay, наоборот, поднимается до этого же значения:
.effect:hover .caption,
.effect:hover .overlay {
top: 0px;
}
Изменяем прозрачность. Добавляем движение отдельных элементов. Эффекты #2.1-#2.3
Пример
В эффекте #2.1 элементы выдвигаются из центра к краям. Воспользуемся базовой html-структурой, в которую, для создания этого эффекта, не понадобится вносить никаких изменений.
А вот в css-стили изменения внести понадобится. В первую очередь, необходимо сместить заголовок и кнопку в центр .caption, чтобы задать начальную точку для последующего перехода. Кроме того, необходимо добавить этим элементам свойство transition, поскольку сейчас именно они являются объектами анимирования:
.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: 62px;
transition: all 0.3s linear 0s;
}
.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: -58px;
transition: all 0.3s linear 0s;
}
Теперь, если мы зададим конечную точку анимации:
.effect:hover h4,
.effect:hover a.btn {
top: 0px;
}
мы получим не самый красивый результат. Полупрозрачная подложка никуда не делась, элементы кучкуются в центре и неэстетично оттуда разъезжаются. Поскольку, с помощью transition, можно изменять не только положение элемента, но и, например, его прозрачность, благодаря ей мы сможем скрыть и подложку, и элементы в центре до момента, пока не понадобится их подвинуть.
Добавляем прозрачность и transition к .caption:
.effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
transition: all 0.5s linear 0s;
}
Таким образом, сейчас .caption мы спрятали, и чуть позже настроим так, чтобы он появлялся только при наведении мыши. Необходимо добавить прозрачность и для всех элементов внутри .caption, и код для них будет выглядеть так:
.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: 62px;
opacity: 0;
transition: all 0.3s linear 0s;
}
.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: -58px;
opacity: 0;
transition: all 0.3s linear 0s;
}
.effect .caption p {
margin: 15px 0px;
text-align: center;
font-style: italic;
padding: 0px 10px;
opacity: 0;
transition: all 0.3s linear 0s;
}
Теперь на hover будет происходить следующее: прозрачность .caption и элементов внутри нее сменится с opacity: 0 на opacity: 1, одновременно с чем начнет меняться местоположение заголовка и кнопки:
.effect:hover h4,
.effect:hover a.btn {
top: 0px;
opacity: 1;
}
.effect:hover .caption,
.effect:hover p {
opacity: 1;
}
Эффекты #2.2 и #2.3 построены аналогичным образом, только для эффекта #2.2 заголовок и кнопку мы смещаем сверху вниз и снизу вверх соответственно, а для эффекта #2.3 справа налево и слева направо соответственно.
Изменения, которые необходимо внести в код эффекта #2.1, чтобы получить эффект #2.2:
.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: -66px;
opacity: 0;
transition: all 0.3s linear 0s;
}
.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: 66px;
opacity: 0;
transition: all 0.3s linear 0s;
}
В остальном, все остается аналогичным.
Ну а чтобы из эффекта #2.1 получить эффект #2.3, изменим следующее:
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;
left: 300px;
opacity: 0;
transition: all 0.3s linear 0s;
}
.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;
left: -300px;
opacity: 0;
transition: all 0.3s linear 0s;
}
.effect:hover h4,
.eff-2-3:hover a.btn {
left: 0px;
opacity: 1;
}
Поговорим о transform и об увеличении/уменьшении элементов. Эффекты #3.1-#3.3
Пример
Эффект #3.1 строится на том, что, при наведении, появляются очень увеличенные элементы <h4>, <p> и <a>, постепенно уменьшающиеся до нормальных размеров.
html-структуру оставляем базовой. Что касается изменений в таблице стилей, уменьшающимся элементам мы должны добавить свойство transform. Transform позволяет трансформировать элементы: вращать, менять им размеры, наклонять, перемещать, комбинировать несколько свойств для создания более сложных эффектов. Для этих эффектов мы разберем уменьшение/увеличение элементов.
Необходимое для такой трансформации значение свойства transform — scale(x,y), где значение x — изменение размеров объекта по горизонтали, а y — по вертикали соответственно. Если мы применим это свойство для <h4>, <p> и <a>, то получим вот что:
.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;
transform: scale(2);
transition: all 0.3s linear 0s;
}
Как видите, у значения scale в данном случае не два параметра, а один, и это означает, что и по горизонтали, и по вертикали наш элемент увеличен в два раза.
.effect .caption p {
margin: 15px 0px;
text-align: center;
font-style: italic;
padding: 0px 10px;
transform: scale(2);
transition: all 0.3s linear 0s;
}
.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;
transform: scale(2);
transition: all 0.3s linear 0s;
}
Теперь на hover наша задача уменьшить эти элементы до их нормального размера, что мы и делаем, добавляя эти стили:
.effect:hover .caption h4,
.effect:hover .caption p,
.effect:hover .caption a.btn {
transform: scale(1);
}
Что касается .caption, как и в разборе эффектов #2.1-#2.3, мы выставляем ему opacity: 0 и очень маленькое время transition, чтобы появление подложки не отвлекало зрителя от основной анимации:
.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.2s linear 0s;
}
.effect:hover .caption {
opacity: 1;
}
Эффект #3.2 строится аналогично предыдущему, с тем лишь исключением, что элементы не уменьшаются, а увеличиваются при наведении мыши. Выставим для них такое значение scale: 0.25, все прочие стили остаются аналогичны.
А вот эффект #3.3 — это комбинация из перемещения элементов и изменения их размеров. Как видим, элемент <p> остается на своем месте и размеры не меняет, для него стили остаются стандартные. Что касается <h4> и <a>, наша задача — переместить их наверх и вниз соответственно и уменьшить в размерах:
.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. Вот только само по себе вращение не так уж зрелищно, поэтому мы совместим его с изменением размера элемента.
html-структура остается базовой, равно как и стили для <h4>, <p> и <a> элементов. Изменяться будут лишь стили для .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-структура и стили для <h4>, <p> и <a> остаются базовыми. Изменятся только стили для .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-структура остается базовой, равно как и стили для <h4>, <p> и <a>. Изменяем только стили для .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-структура понадобится такая:
<div class="effect">
<img src="img/ef7.jpg" alt="Effect #7" />
<div class="overlay overlay-top"></div>
<div class="overlay overlay-bottom"></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>
Как видите, у нас добавилось два .overlay-слоя, тех самых, что будут выезжать сверху и снизу.
Что касается стилей: для <h4>, <p> и <a> стили остаются дефолтные.
Теперь давайте рассмотрим стили для .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
#8.1-#8.3
Пример
Изюминку этих эффектов составляет bounce-эффект, строящийся на значении параметра transition-timing-function свойства transition для .overlay.
html-структура такова:
<div class="effect">
<img src="img/ef8.jpg" alt="Effect #8" />
<div class="overlay"></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>
В данном случае .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-#9.3
Пример
Эффект #9.1 строится на том, что два .overlay появляются по очереди из центра, а следом за ними с небольшим bounce-эффектом выезжает .caption.
Что касается html-структуры, она такова:
<div class="effect">
<img src="img/ef9.jpg" alt="Effect #9" />
<div class="overlay overlay-1"></div>
<div class="overlay overlay-2"></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>
Стили для <h4>, <p> и <a> остаются неизменными. Рассмотрим стили для .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-структура:
<div class="effect”>
<img src="img/ef9.jpg" alt="Effect #9" />
<div class="overlay"></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>
Чтобы добиться такого вида для .overlay, мы дадим ему постепенно увеличивающуюся box-shadow:
.effect .overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
transition: all 0.3s linear 0.3s;
}
.effect:hover .overlay {
box-shadow: inset 0px 0px 25px 100px rgba(0,0,0,0.7);
}
Изначальное положение для .caption будет: разворот на 180 градусов и opacity: 0. На hover разворачиваем .caption, который, в процессе поворота, становится непрозрачным:
.effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
transform: rotate(180deg);
transition: all 0.3s linear 0s;
}
.effect:hover .caption {
opacity: 1;
transform: rotate(0deg);
transition-delay: 0.5s;
}
Все остальные стили — дефолтные.
#10.1-#10.3
Пример
Эффект #10.1 состоит из пяти меняющих размер “лесенкой” элементов .overlay и, словно выныривающего, .caption.
html-структура нужна такая:
<div class="effect">
<img src="img/ef10.jpg" alt="Effect #10" />
<div class="overlay overlay-1"></div>
<div class="overlay overlay-2"></div>
<div class="overlay overlay-3"></div>
<div class="overlay overlay-4"></div>
<div class="overlay overlay-5"></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>
Сначала построим “лесенку”. Каждый .overlay отличается от другого своим местоположением и значением параметра delay:
.effect .overlay {
background: rgba(0,0,0,0.7);
width: 20%;
height: 100%;
position: absolute;
top: 100%;
}
.effect .overlay-1 {
left: 0;
transition: all 0.15s linear 0.2s;
}
.effect .overlay-2 {
left: 20%;
transition: all 0.15s linear 0.25s;
}
.effect .overlay-3 {
left: 40%;
transition: all 0.15s linear 0.3s;
}
.effect .overlay-4 {
left: 60%;
transition: all 0.15s linear 0.35s;
}
.effect .overlay-5 {
left: 80%;
transition: all 0.15s linear 0.4s;
}
На hover их delay тоже будут различаться:
.effect:hover .overlay {
top: 0px;
}
.effect:hover .overlay-1 {
transition-delay: 0s;
}
.effect:hover .overlay-2 {
transition-delay: 0.1s;
}
.effect:hover .overlay-3 {
transition-delay: 0.15s;
}
.effect:hover .overlay-4 {
transition-delay: 0.2s;
}
.effect:hover .overlay-5 {
transition-delay: 0.25s;
}
Самое интересное и сложное здесь — .caption. Вот базовые стили для него:
.effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
width: 100%;
height: 100%;
color: #fff;
transition: all 0.3s linear 0s;
}
Теперь нам нужно задать ему положение до начала анимации. Во-первых, развернуть, ведь, когда мы наводим мышь, мы видим, как .caption проворачивается на некоторый угол. Зададим и transform-origin, определяющий точку, вокруг которой будет проходить трансформация. Добавим transform: rotate(-50deg); и transform-origin: 0% 100%;. Следующим шагом будет смещение по вертикали и по горизонтали, чтобы чуть позже обеспечить “выныривание”. Смещать будем с помощью transform: translate(x,y), который сдвигает элемент по оси X и Y соответственно. Наша задача — сдвинуть .caption почти в самый угол по горизонтали и примерно на две трети за пределы контейнера .effects по вертикали:
.effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
width: 100%;
height: 100%;
color: #fff;
transform: rotate(-50deg) translate(-101px,291px);
transform-origin: 0% 100%;
transition: all 0.3s linear 0s;
}
Теперь нам нужно совсем скрыть .caption до тех пор, пока на контейнер с эффектом не наведут мышь. В этот раз мы спрячем с помощью height: 0px; и overflow: hidden;. Конечные стили такие:
.effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
width: 100%;
height: 0px;
overflow: hidden;
color: #fff;
transform: rotate(-50deg) translate(-101px,291px);
transform-origin: 0% 100%;
transition: all 0.3s linear 0s;
}
Теперь, чтобы проявить .caption на hover, восстановим его высоту, повернем до rotate(0deg) и вернем на место по горизонтали и вертикали:
effect:hover .caption {
height: 100%;
transform: rotate(0deg) translate(0px,0px);
transition-delay: 0.3s;
}
Стили для <h4>, <p> и <a> остаются дефолтными.
Эффект #10.2 строится на двух .overlay, выезжающих из верхнего левого и правого нижнего угла соответственно, а также на “выпадании” сверху элементов <h4>, <p> и <a>.
html-структура нужна такая:
<div class="effect">
<img src="img/ef10.jpg" alt="Effect #10" />
<div class="overlay overlay-1"></div>
<div class="overlay overlay-2"></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>
Начнем с левого верхнего .overlay, раскрывающегося полупрозрачной подложкой:
.effect .overlay-1 {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 0px;
height: 0px;
overflow: hidden;
transition: all 0.3s linear 0.3s;
}
.effect:hover .overlay-1 {
width: 100%;
height: 100%;
transition-delay: 0s;
}
Интереснее с нижним правым. Поскольку ширина border равна 4px, просто задать ширине и высоте по 100% недостаточно, нужно компенсировать по 8px по вертикали и по горизонтали, чем нам и поможет calc:
effect .overlay-2 {
position: absolute;
bottom: 0px;
right: 0px;
background: transparent;
border: 4px double #fff;
width: 0px;
height: 0px;
opacity: 0;
transition: all 0.3s linear 0.3s;
}
.effect:hover .overlay-2 {
width: 100%;
max-width: calc(100% - 8px);
height: 100%;
max-height: calc(100% - 8px);
opacity: 1;
transition-delay: 0s;
}
Теперь перейдем к .caption и его содержимому. Для .caption стили остаются дефолтными, изменятся они для перемещаемых элементов <h4>, <p> и <a>, каждый из которых необходимо сместить наверх. Чтобы заголовок не налезал на border подчеркиванием, рассчитаем ему ширину, как и .overlay-2:
.effect .caption h4 {
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid white;
padding-bottom: 20px;
margin: 20px auto 0px auto;
width: calc(100% - 8px);
position: relative;
top: -100%;
transition: all 0.3s linear 0.2s;
}
.effect .caption p {
margin: 15px 0px;
text-align: center;
font-style: italic;
padding: 0px 10px;
position: relative;
top: -100%;
transition: all 0.3s linear 0.1s;
}
.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%;;
transition: all 0.3s linear 0s;
}
Осталось лишь, чтоб элементы опускались на hover, причем в установленном нами порядке:
.effect:hover .caption a.btn,
.effect:hover .caption p,
.effect:hover .caption h4 {
top: 0px;
}
.effect:hover .caption a.btn {
transition-delay: 0.3s;
}
.effect:hover .caption p {
transition-delay: 0.4s;
}
.effect:hover .caption h4 {
transition-delay: 0.5s;
}
Эффект #10.3 состоит из увеличивающейся картинки и изменения угла поворота .caption на hover.
html-структура нужна дефолтная, равно как и стили для <h4>, <p> и <a>. А начнем мы с увеличения картинки:
.effect img {
width: 100%;
height: 100%;
transition: all 0.25s linear 0.3s;
transform: scale(1);
}
.effect:hover img {
transform: scale(1.3);
transition-delay: 0s;
}
Ну а что касается .caption — задача в том, чтобы, развернув его на 30 градусов, совместить его правый нижний угол с правым нижним углом картинки и заставить исчезнуть с помощью понижения прозрачности. А его transition, состоит из двух частей:
- opacity должен измениться сразу же, как только наводим мышь, за очень короткое время. opacity 0.1s linear 0s
- для transform необходима задержка на величину времени, необходимого для п.1, и transition-timing-function, создающий иллюзию небольшого замаха: transform 0.35s cubic-bezier(0.49, -0.19, 0.7, -0.01) 0.1s
.effect .caption {
position: absolute;
top: 0px;
left: 0px;
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
color: #fff;
opacity: 0;
transform: rotate(30deg) translate(30px,-89px);
transition: transform 0.35s cubic-bezier(0.49, -0.19, 0.7, -0.01) 0.1s, opacity 0.1s linear 0s;
}
.effect:hover .caption {
transform: rotate(0deg) translate(0px,0px);
opacity: 1;
transition-delay: 0.3s;
}
Надеюсь, эта статья оказалась для вас полезной и интересной!
Комментарии (8)
Lopar
26.08.2015 13:11Нужно больше золота!
Ну правда. Есть сайт с конкретными примерами. Зачем эта вода «…мы делаем эффект, который заключается в том, что текст информационного сообщения будет медленно выезжать с левой стороны при неторопливом наведении курсора указателя класса мышь…» в стиле рефератов первокурсника? Или вот эти речевые обороты «…[листинг кода] вставили? ничего не получается? конечно не получается! ведь мы не добавили туда [листинг кода]! добавляем! вот вам окончательный вариант: [листинг кода]…».
Хабр любит подробности, но это уже излишняя дотошность, имхо.
eisenfox
26.08.2015 13:27Согласитесь, это уже дело вкуса. Это и задумывалось, как очень подробный туториал для новичков, о чем есть предупреждение в вводном абзаце. Но, все равно, спасибо за мнение.
Pulse
26.08.2015 15:19Туториал хороший, а вот
мультиков нетхотя бы gif-ки с примерами описываемых эффектов были бы очень кстати :(
SelenIT2
???????
Ну ёжики лесные, ну не 2011-й же год на дворе… И вообще уже давно страдать должны машины, а не люди!