Intermediate CSS3 Hover Effects. Покроковий туторіал. Частина 3

Ця стаття є логічним продовженням моєї попередньої статті, присвяченої основам CSS3 transitions і, якщо в ній я показувала принципи роботи цих основ на простих прикладах, зараз я хотіла б перейти до більш складним, красивим і цікавим ефектів.

З-за великого розміру стаття розбита на три частини. частина Перша. Друга частина

Демо матеріали лежать тут. Всі префікси проставлені в демо, тут же я не буду на них акцентувати.

Попередження: ефекти працюють тільки в сучасних браузерах, які підтримують можливості CSS3.



Ефект #22

Приклад

Для створення цього ефекту нам знадобиться доповнити базову html-структуру двома блоками з зображеннями і одним блоком з іконкою:

<div class="effect eff-22">
<div class="img-block img-block-left">
<img src="img/ef22.jpg" alt="Effect #22" />
</div>
<div class="img-block img-block-right">
<img src="img/ef22.jpg" alt="Effect #22" />
</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>


В даному ефекті, щоб картинка розпалася на дві частини, ми створюємо два блоки по половині ширини від блоку з ефектом, кожен з яких поміщаємо одну і ту ж картинку. Ось загальні для обох блоків стилі:

.eff-22 .img-block {
height: 100%;
width: 50%;
overflow: hidden;
position: absolute;
z-index: 5;
transition: all 0.3 s linear 0s;
}


Щоб блоки розходилися в різні сторони зазначеним чином, нам треба задати для них точку, щодо якої буде відбуватися анімація. Ось стилі для кожного блоку окремо:

.eff-22 .img-block-left {
top: 0px;
left: 0px;
transform-origin: bottom right;
}

.eff-22 .img-block-right {
top: 0px;
right: 0px;
transform-origin: left bottom;
}


Зараз у нас і в правому, і на лівому блоці відображається по одному і тому ж шматочку картинки, тому в правому блоці ми змістимо картинку ліворуч на 50%:

.eff-22 .img-block-right img {
transform: translate(-50%, 0);
}


Тепер стилізуємо .caption. Ми робимо блок прозорим, щоб, поки завантажуються картинки, .caption не було видно:

.eff-22 .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.01 s linear 0.3 s;
}


У внутрішніх елементів .caption зберігаються дефолтні стилі.

І стилізуємо .overlay: детальніше про складання рівнобедрених трикутників я розповідала в ефекті #19.

.eff-22 .overlay {
position: absolute;
width: 0px;
height: 0px;
bottom: 0px;
left: 0px;
z-index: 10;
border: 150px solid transparent;
border-bottom: 50px solid rgba(255,255,255,0.6);
transition: all 0.2 s linear 0.2 s;
}

.eff-22 .overlay .icon {
width: 35px;
height: 23px;
background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
position: absolute;
top: 17px;
left: -18px;
}


Збираємо ефект.

Стискаємо .overlay:

.eff-22:hover .overlay {
border-bottom: 0px solid rgba(255,255,255,0.6);
transition-delay: 0s;
}

.eff-22:hover .overlay .icon {
opacity: 0;
}


Стилізуємо «цю» картинку:

.eff-22:hover .img-block-left {
transform: rotate(-90deg);
}

.eff-22:hover .img-block-right {
transform: rotate(90deg);
}

.eff-22:hover .img-block {
transition-delay: 0.2 s;
}


Прибираємо прозорість .caption:

.eff-22:hover .caption {
opacity: 1;
transition-delay: 0s;
}


Ефект #23

Приклад

Для створення цього ефекту нам знадобиться доповнити базову html-структуру двома блоками з зображеннями і одним блоком з іконкою:

<div class="effect eff-23">
<div class="img-block img-block-top">
<img src="img/ef23.jpg" alt="Effect #23" />
</div>
<div class="img-block img-block-bottom">
<img src="img/ef23.jpg" alt="Effect #23" />
</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>


Щоб картинка розкривалася на дві частини, ми, як і в ефекті #22, створюємо два блоки, кожен з яких займає половину висоти блоку з ефектом, і в кожен з цих блоків кладемо одну і ту ж картинку. Загальні стилі для обох блоків:

.eff-23 .img-block {
height: 50%;
width: 100%;
overflow: hidden;
position: absolute;
z-index: 5;
transition: all 0.3 s linear 0s;
}


Щоб блоки «стискалися» щодо верхньої та нижньої межі блоку з ефектом, нам треба задати transform-origin для кожного з них:

.eff-23 .img-block-top {
top: 0px;
left: 0px;
transform-origin: top;
}

.eff-23 .img-block-bottom {
bottom: 0px;
left: 0px;
transform-origin: bottom;
}


Тепер ми можемо бачити і на правому, і на нижньому блоці одну і ту ж частину зображення, тому посунемо зображення в нижньому блоці на 50% вгору, щоб стало видно його нижню частину:

.eff-23 .img-block-bottom img {
transform: translate(0, -50%);
}


Тепер стилізуємо .caption. Ми робимо блок прозорим, щоб, поки завантажуються картинки, .caption не було видно:

.eff-23 .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.01 s linear 0.3 s;
}


У внутрішніх елементів .caption зберігаються дефолтні стилі.

Стилізуємо .overlay: детальніше про складання рівнобедрених трикутників я розповідала в ефекті #19.

.eff-23 .overlay {
position: absolute;
width: 0px;
height: 0px;
bottom: 0px;
left: 0px;
z-index: 10;
border: 150px solid transparent;
border-bottom: 50px solid rgba(255,255,255,0.6);
transition: all 0.2 s linear 0.1 s;
}

.eff-23 .overlay .icon {
width: 35px;
height: 23px;
background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
position: absolute;
top: 17px;
left: -18px;
}


Збираємо ефект.

Стискаємо блоки з картинками до країв блоку з ефектами:

.eff-23:hover .img-block {
transform: scaleY(0);
transition-delay: 0.2 s;
}


Прибираємо .overlay:

.eff-23:hover .overlay {
border-bottom: 0px solid rgba(255,255,255,0.6);
transition-delay: 0s;
}

.eff-23:hover .overlay .icon {
opacity: 0;
}


Повертаємо .caption непрозорість:


.eff-23:hover .caption {
opacity: 1;
transition-delay: 0s;
}


Ефект #24

Приклад

Для створення цього ефекту нам необхідно доповнити дефолтну html-структуру чотирма блоками з картинками всередині і блоком з іконкою:

<div class="effect eff-24">
<div class="img-block img-block-1">
<img src="img/ef24.jpg" alt="Effect #24" />
</div>
<div class="img-block img-block-2">
<img src="img/ef24.jpg" alt="Effect #24" />
</div>
<div class="img-block img-block-3">
<img src="img/ef24.jpg" alt="Effect #24" />
</div>
<div class="img-block img-block-4">
<img src="img/ef24.jpg" alt="Effect #24" />
</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>


Щоб створити такий ефект піднімається «шторки», необхідно взяти чотири блоки і помістити в них одну і ту ж картинку. Висота кожного блоку складає чверть від висоти блоку з ефектом:

.eff-24 .img-block {
width: 100%;
height: 25%;
position: absolute;
overflow: hidden;
left: 0px;
}


Кожен блок розташовується нижче попереднього на 25%, а зображення в кожному наступному блоці піднімається на 25% щодо положення картинки у попередньому блоці (більш докладно про таку організацію блоків і картинок можна почитати в описі ефектів #7-9). Оскільки, при наведенні, четвертий блок йде вгору і ховається під третій, потім вони обидва йдуть ще вище і ховаються під другий, а потім всі три — під перший, найбільший z-index буде у першого блоку, а найменший — у четвертого. Ось стилі для всіх чотирьох блоків та їх зображень:

.eff-24 .img-block-1 {
top: 0px;
z-index: 5;
transition: all 0.15 s linear 0s;
}

.eff-24 .img-block-2 {
top: 25%;
z-index: 4;
transition: all 0.3 s linear 0s;
}

.eff-24 .img-block-2 img {
transform: translateY(-25%);
}

.eff-24 .img-block-3 {
top: 50%;
z-index: 3;
transition: all 0.45 s linear 0s;
}

.eff-24 .img-block-3 img {
transform: translateY(-50%);
}

.eff-24 .img-block-4 {
top: 75%;
z-index: 2;
transition: all 0.6 s linear 0s;
}

.eff-24 .img-block-4 img {
transform: translateY(-75%);
}


Тепер стилізуємо .caption. Ми робимо блок прозорим, щоб, поки завантажуються картинки, .caption не було видно:

.eff-24 .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.01 s linear 0.6 s;
}


У внутрішніх елементів .caption зберігаються дефолтні стилі.

Стилізуємо .overlay. Детальніше про складання рівнобедрених трикутників я розповідала в ефекті #19.

.eff-24 .overlay {
position: absolute;
width: 0px;
height: 0px;
bottom: 0px;
left: 0px;
z-index: 10;
border: 150px solid transparent;
border-bottom: 50px solid rgba(255,255,255,0.6);
transition: all 0.2 s linear 0.5 s;
}

.eff-24 .overlay .icon {
width: 35px;
height: 23px;
background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
position: absolute;
top: 17px;
left: -18px;
}


Збираємо ефект.

Завдання — прибрати всі блоки із зображеннями так, щоб приховати навіть самий перший блок за межі блоку з ефектом. Таким чином, піднімемо їх всі до 25% вище верхнього краю блоку з ефектом:

.eff-24:hover .img-block {
top: -25%;
}


Ефект «шторки» досягається комбінацією часу, виділеного на анімацію (ми прописували це вище) і затримки підйому:

.eff-24:hover .img-block-3 {
transition-delay: 0.15 s;
}

.eff-24:hover .img-block-2 {
transition-delay: 0.3 s;
}

.eff-24:hover .img-block-1 {
transition-delay: 0.45 s;
}


Прибираємо .overlay:

.eff-24:hover .overlay {
border-bottom: 0px solid rgba(255,255,255,0.6);
transition-delay: 0s;
}

.eff-24:hover .overlay .icon {
opacity: 0;
}


Робимо .caption непрозорим:

.eff-24:hover .caption {
opacity: 1;
transition-delay: 0s;
}


Ефект #25

Приклад

Для створення цього ефекту в дефолтну html-структуру включений блок з іконкою і три блоки, які будуть по черзі з'являтися:

<div class="effect eff-25">
<img src="img/ef25.jpg" alt="Effect #25" />
<div class="overlay">
<div class="icon"></div>
</div>
<div class="flash flash-1"></div>
<div class="flash flash-2"></div>
<div class="flash flash-3"></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>


Почнемо зі стилів .flash блоків. Їх три, вони займають по третині висоти блоку з ефектом кожен:

.eff-25 .flash {
position: absolute;
width: 100%;
height: 100px;
opacity: 0;
left: 0px;
background: rgba(255,255,255,0.4);
}

.eff-25 .flash-1 {
top: 0px;
}

.eff-25 .flash-2 {
top: 100px;
}

.eff-25 .flash-3 {
top: 200px;
}


Тепер стилізуємо .overlay, у якого спочатку змінюється ширина, і він наче розтягується, а потім положення щодо блоку, оскільки він від'їжджає вліво, за межі блоку з ефектом:

.eff-25 .overlay {
position: absolute;
width: 140px;
height: 40px;
top: 130px;
left: 0px;
background: rgba(255,255,255,0.6);
transition: width 0.2 s linear 0s, left 0.15 s linear 0.2 s;
}

.eff-25 .overlay:after {
content: " ";
display: block;
position: absolute;
width: 0px;
top: 0;
left: 100%;
border: 20px solid transparent;
border-left: 20px solid rgba(255,255,255,0.6);
}

.eff-25 .overlay .icon {
width: 35px;
height: 23px;
background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
position: absolute;
top: 9px;
left: 83%;
z-index: 10;
}


Ховаємо .caption за нижній край блоку з ефектом і даємо їй більш складний transition-timing-function:

.eff-25 .caption {
position: absolute;
top: 100%;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
color: white;
transition: all 0.3 s cubic-bezier(0.16, 0.32, 0, 0.86) 0s;
}


Стилі елементів .caption залишаються дефолтними.

Тепер наше завдання зробити так, щоб при наведенні спочатку один .flash з'являвся і зникав, і тільки потім з'являвся наступний. Щоб це зробити, ми повинні скористатися властивістю animation і супутнім йому @keyframes. Почнемо з @keyframes: він потрібен для того, щоб задати ім'я майбутньої анімації і ключові точки, який проходить у своєму русі анимируемый елемент. У .flash є три ключових точки:

  1. початкова, в якій він прозорий
  2. середня, в якій він з'являється
  3. кінцева, в якій він знову прозорий


Таким чином, ми можемо задати такий @keyframes, де flash — це ім'я анімації:

@keyframes flash {
from {opacity: 0;}
50% {opacity: 1;}
to {opacity: 0;}
}


Тепер збираємо ефект.

При наведенні нам потрібно запустити анімацію. Для цього ми використовуємо властивість animation. Тут ми використовуємо три параметри: ім'я, час, необхідний на проходження всіх ключових точок кожної спалаху і animation-timing-function, аналогічна transition-timing-function.

.eff-25:hover .flash {
animation: flash 0.3 s linear;
}


Тепер, якщо подивитися, що вийшло, стане видно, що всі .flash одночасно спалахують і гаснуть, таким чином, нам треба використовувати ще один параметр animation — затримку, що працює аналогічно затримці для transition:

.eff-25:hover .flash-1 {
animation-delay: 0.45 s;
}

.eff-25:hover .flash-2 {
animation-delay: 0.55 s;
}

.eff-25:hover .flash-3 {
animation-delay: 0.65 s;
}


Додаємо «розтягування» і зникнення .overlay:

.eff-25:hover .overlay {
width: 170px;
left: -190px;
}


І піднімаємо .caption:

.eff-25:hover .caption {
top: 0px;
transition-delay: 0.8 s;
}


Ефект #26

Приклад

Для створення цього ефекту необхідно додати в дефолтну структуру блок з іконкою і блок-смужку, який буде видно при наведенні:

<div class="effect eff-26">
<img src="img/ef26.jpg" alt="Effect #26" />
<div class="overlay">
<div class="icon"></div>
</div>
<div class="flash"></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>


Почнемо зі стилізації смужки. Це вузький довгий блок, який буде опускатися і підніматися при наведенні. Він винесений в початкову точку анімації: вгору, за межі блоку з ефектом.

.eff-26 .flash {
position: absolute;
left: -200px;
top: -200px;
background-color: rgba(255,255,255,0.6);
width: 590px;
height: 100px;
transform: rotate(-25deg);
}


Тепер задамо @keyframes для визначення ключових точок анімації (докладніше про це написано в ефекті #25):

@keyframes flash-movement {
from {top: -200px;}
to {top: 400px;}
}


Задамо стилі .overlay, про який детальніше теж розказано в ефекті #25:

.eff-26 .overlay {
position: absolute;
width: 140px;
height: 40px;
top: 130px;
left: 0px;
background: rgba(255,255,255,0.6);
transition: width 0.2 s linear 0s, left 0.15 s linear 0.2 s;
}

.eff-26 .overlay:after {
content: " ";
display: block;
position: absolute;
width: 0px;
top: 0;
left: 100%;
border: 20px solid transparent;
border-left: 20px solid rgba(255,255,255,0.6);
}

.eff-26 .overlay .icon {
width: 35px;
height: 23px;
background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
position: absolute;
top: 9px;
left: 83%;
z-index: 10;
}


І задамо прозорість .caption:

.eff-26 .caption {
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
color: white;
opacity: 0;
transition: all 0.2 s linear 0s;
}


У внутрішніх елементів .caption залишаються дефолтні стилі.

Збираємо ефект.

Запускаємо анімацію блоку з смужкою. Як бачите, тут використовується більше параметрів властивості animation, ніж у минулому ефекті. Крім назви анімації, часу і animation-timing-function використовується ще:

  1. iteration-count — скільки разів будемо програвати анімацію. В даному випадку — двічі: зверху вниз і знизу вгору.
  2. animation-direction — показує, чи елемент проходити ключові точки в прямому порядку (від from до to) або у зворотному (від to до from). Значення alternate означає, що у кожен непарний програш анімація буде йти в прямому порядку, а кожний парний — у зворотному, ось чому перший раз смужка рухається зверху вниз, а другий раз — знизу вгору.


.eff-26:hover .flash {
animation: flash-movement 0.4 s linear 0.45 s 2 alternate;
}


Прибираємо .overlay:

.eff-26:hover .overlay {
width: 170px;
left: -190px;
}


Міняємо прозорість .caption:

.eff-26:hover .caption {
opacity: 1;
transition-delay: 0.8 s;
}


Ефект #27

Приклад

Для роботи з цим ефектом необхідно доповнити дефолтну html-структуру блоком з іконкою і блоком з колом:

<div class="effect eff-27">
<img src="img/ef27.jpg" alt="Effect #27" />
<div class="overlay">
<div class="icon"></div>
</div>
<div class="circle">
<div class="half-circle half-circle-left"></div>
<div class="half-circle half-circle-right"></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>


Почнемо з блоку з колом, який з'являється при наведенні. Стилі для самого блоку:

.eff-27 .circle {
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
opacity: 0;
}


При наведенні коло розпадається на дві половини, щоб це здійснити, зберемо його з двох напівкруглих блоків, які і будемо потім відсувати один від одного:

.eff-27 .circle .half-circle {
background: rgba(255,255,255,0.6);
width: 50px;
height: 100px;
position: absolute;
}

.eff-27 .circle .half-circle-left {
top: 0px;
left: 0px;
border-radius: 100px 0px 0px 100px;
}

.eff-27 .circle .half-circle-right {
top: 0px;
right: 0px;
border-radius: 0px 100px 100px 0px;
}


Тепер створюємо @keyframes для кожного з напівкруглих блоків. Детальніше про @keyframes я писала в ефекті #25. Як бачимо, кожен з напівкіл проходить три ключові точки:

  1. півколо знаходиться на своєму дефолтному місці і є частиною кола
  2. він відходить у бік, зменшується в розмірах і перетворюється на повноцінний коло
  3. летить за межі блоку з ефектом


@keyframes half-circle-left {
from {
top: 0px;
left: 0px;
border-radius: 100px 0px 0px 100px;
}

20% {
top: 25px;
left: -15px;
height: 50px;
border-radius: 100px;
}

to {
top: 0px;
left: -500px;
height: 50px;
border-radius: 100px;
}
}

@keyframes half-circle-right {
from {
top: 0px;
right: 0px;
border-radius: 0px 100px 100px 0px;
}

20% {
top: 25px;
right: -15px;
height: 50px;
border-radius: 100px;
}

to {
top: 0px;
right: -500px;
height: 50px;
border-radius: 100px;
}
}


Задамо стилі .overlay, про який детальніше теж розказано в ефекті #25:

.eff-27 .overlay {
position: absolute;
width: 140px;
height: 40px;
top: 130px;
left: 0px;
background: rgba(255,255,255,0.6);
transition: width 0.2 s linear 0s, left 0.15 s linear 0.2 s;
}

.eff-27 .overlay:after {
content: " ";
display: block;
position: absolute;
width: 0px;
top: 0;
left: 100%;
border: 20px solid transparent;
border-left: 20px solid rgba(255,255,255,0.6);
}

.eff-27 .overlay .icon {
width: 35px;
height: 23px;
background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
position: absolute;
top: 9px;
left: 83%;
z-index: 10;
}


Приберемо вниз .caption

.eff-27 .caption {
position: absolute;
top: 100%;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
color: white;
transition: all 0.2 s linear 0s;
}


У решти елементів .caption залишаються дефолтні стилі.

Збираємо ефект.

Спочатку міняємо прозорість блоку з колом:

.eff-27:hover .circle {
opacity: 1;
transition-delay: 0.4 s;
}


Потім викликаємо анімації кожного з півкіл. Крім параметрів, розглянутих в ефектах #25-26, ми використовуємо тут один новий параметр: animation-fill-mode. Цей параметр визначає, які стилі застосовуються до анімованих елементів, коли анімація закінчена або зупинена. По дефолту, після анімації елементи повертаються в положення, установлене першою ключовою точкою @keyframes, що нам тут абсолютно не потрібно, інакше прямо .caption знову з'явиться білий круг. Значення forwards необхідно для того, щоб елементи залишалися в становищі, заданому останньої ключовою точкою @keyframes, тобто, за межами блоку з ефектом:

.eff-27:hover .half-circle-left {
animation: half-circle-left 1s linear 0.55 s forwards;
}

.eff-27:hover .half-circle-right {
animation: half-circle-right 1s linear 0.55 s forwards;
}


Тепер прибираємо .overlay:

.eff-27:hover .overlay {
width: 170px;
left: -190px;
}


І висуваємо вгору .caption:

.eff-27:hover .caption {
top: 0px;
transition-delay: 1s;
}


Ефект #28

Приклад

Для роботи з цим ефектом необхідно доповнити дефолтну html-структуру блоком з іконкою і блоком з напівкруглою виїмкою, який стає видно при наведенні:

<div class="effect eff-28">
<img src="img/ef28.jpg" alt="Effect #28" />
<div class="overlay">
<div class="icon"></div>
</div>
<div class="circle"></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>


Почнемо з блоку з виїмкою. Сам по собі цей блок — велика окружність з кордоном, ширина якої — 3px, розташована так, щоб тільки частина її перебувала в межах блоку з ефектом. Щоб заповнити фоном весь простір блоку з ефектом ліворуч від кола, дамо їй велику напівпрозору тінь:

.eff-28 .circle {
width: 600px;
height: 600px;
border: 3px solid rgba(255,255,255,0.6);
-webkit-border-radius: 300px;
border-radius: 300px;
position: absolute;
bottom: -50px;
left: 50px;
box-shadow: 0px 0px 235px 1000px rgba(255,255,255,0.5);
opacity: 0;
transition: width 0.4 s linear 0s, height 0.4 s linear 0s, opacity 0.15 s linear 0s;
}


Тепер зменшимо розмір .caption до нуля:

.eff-28 .caption {
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
color: white;
transform: scale(0);
transition: all 0.2 s linear 0s;
}


У інших елементів .caption залишаються дефолтні стилі.

Залишається тільки стилізувати блок з іконкою. Ось його базові стилі:

.eff-28 .overlay {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
border-radius: 500px;
background: rgba(255,255,255,0.6);
}

.eff-28 .overlay .icon {
width: 35px;
height: 23px;
background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
position: absolute;
top: 39px;
left: 33px;
}


Завдання — прописати йому анімацію «підстрибування», і для цього нам знадобиться ось такий @keyframes (докладніше про @keyframes можна прочитати в ефекті #25). Елемент проходить п'ять ключових точок:

  1. Вихідне положення
  2. Ударяється об нижній край блоку з ефектом
  3. Повертається у вихідне положення
  4. Ударяється об верхній край блоку з ефектом
  5. Прискорюючись, відлітає за край блоку з ефектом


@keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}


Збираємо ефект.

Спочатку застосовуємо анімацію до блоку з іконкою. Animation детально розглядалося в ефекті #25, параметр animation-fill-mode в ефекті #27:

.eff-28:hover .overlay {
animation: bounce 0.5 s linear forwards;
}


Потім, змінюючи прозорість, ширину і висоту елемента з виїмкою, створюємо ілюзію руху цього блоку:

.eff-28:hover .circle {
opacity: 1;
width: 400px;
height: 400px;
transition-delay: 0.35 s;
}


І, нарешті, збільшуємо .caption:

.eff-28:hover .caption {
transform: scale(1);
transition-delay: 0.9 s;
}


Ефект #29

Приклад

Для цього ефекту необхідно доповнити дефолтну html-структуру блоком з іконкою і квадратним блоком, що з'являється при наведенні:

<div class="effect eff-29">
<img src="img/ef29.jpg" alt="Effect #29" />
<div class="overlay">
<div class="icon"></div>
</div>
<div class="square"></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>


Почнемо з квадратного блоку. Початкових стилів у цього блоку зовсім небагато, тому що основні стилі, включаючи transition, будуть застосовані до нього тільки при наведенні:

.eff-29 .square {
width: 84%;
height: 84%;
position: absolute;
top: 7%;
left: 7%;
border: 3px solid rgba(255,255,255,0.6);
border-radius: 10px;
transform: scale(0);
opacity: 0;
}


Переміщаємо .caption наверх, за межі блоку з ефектом:

.eff-29 .caption {
position: absolute;
top: -100%;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
color: white;
transition: all 0.2 s linear 0s;
}


Внутрішні елементи .caption зберігають дефолтні стилі.

Стилізуємо блок з іконкою повністю аналогічно до цього ж блоку з ефекту #28, де я розглядала ці стилі детальніше, тут я лише наведу самі стилі і @keyframes:

.eff-29 .overlay {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
border-radius: 500px;
background: rgba(255,255,255,0.6);
}

.eff-29 .overlay .icon {
width: 35px;
height: 23px;
background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
position: absolute;
top: 39px;
left: 33px;
}

@keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}


Збираємо ефект.

Спочатку додаємо стилі для квадратного блоку. Збільшуємо його в розмірах, робимо його непрозорим і додаємо тінь, щоб створити ілюзію наявності фону за межами квадрата. Чому ми додаємо transition тільки при наведенні — тому що при скасуванні hover квадрат відразу повинен зникати.

.eff-29:hover .square {
transform: scale(1);
opacity: 1;
box-shadow: 0px 0px 200px 60px rgba(255,255,255,0.4);
transition: transform 0.3 s linear 0.3 s, opacity 0.2 s linear 0.3 s, box-shadow 0.2 s linear 0.7 s;
}


Додаємо анімацію блоку з іконкою, animation детально розглядалося в ефекті #25, параметр animation-fill-mode в ефекті #27:

.eff-29:hover .overlay {
animation: bounce 0.5 s linear forwards;
}


І опускаємо .caption:

.eff-29:hover .caption {
top: 0px;
transition-delay: 0.8 s;
}


Ефект #30

Приклад

Щоб створити цей ефект, нам необхідно доповнити дефолтну html-структуру блоком з іконкою і блоком з бульбашками, в якому потрібно створити стільки блоків-бульбашок, скільки ви хочете бачити у вашому ефекті:

<div class="effect eff-30">
<img src="img/ef30.jpg" alt="Effect #30" />
<div class="overlay">
<div class="icon"></div>
</div>
<div class="bubbles">
<div class="bubble"></div>
<div class="bubble bubble-2"></div>
<div class="bubble bubble-3"></div>
<div class="bubble bubble-4"></div>
<div class="bubble bubble-5"></div>
<div class="bubble bubble-6"></div>
<div class="bubble bubble-7"></div>
<div class="bubble bubble-8"></div>
<div class="bubble bubble-9"></div>
<div class="bubble bubble-10"></div>
<div class="bubble bubble-11"></div>
<div class="bubble bubble-12"></div>
<div class="bubble bubble-13"></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>


Почнемо з блоку з іконкою. Він повністю аналогічний цього ж блоку з ефекту #28, де можна прочитати про нього докладніше, тут я лише наведу самі стилі і @keyframes:

.eff-30 .overlay {
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
border-radius: 500px;
background: rgba(255,255,255,0.6);
}

.eff-30 .overlay .icon {
width: 35px;
height: 23px;
background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat;
position: absolute;
top: 39px;
left: 33px;
}

@keyframes bounce {
from {top: 100px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 0px;}
to {top: -200px;}
}


Тепер ховаємо .caption за нижньою межею блоку з ефектом:

.eff-30 .caption {
position: absolute;
top: 100%;
left: 0px;
width: 100%;
height: 100%;
text-align: center;
color: white;
transition: all 0.4 s linear 0s;
}


Внутрішні елементи .caption зберігають дефолтні стилі.

Тепер найцікавіше — блок з бульбашками і самі бульбашки.

Стилі для блоку з бульбашками:

.eff-30 .bubbles {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}


Стилі для кожного бульбашки (почитати докладніше про радіальні градієнти можна в ефекті #10):


.eff-30 .bubbles .bubble {
width: 43px;
height: 43px;
position: absolute;
top: 100%;
background: radial-gradient(circle center at center, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7) );
border-radius: 300px;
}


Далі наше завдання розташувати бульбашки по горизонталі врізнобій, щоб вони не піднімалися в одному і тому ж місці:

.eff-30 .bubbles .bubble-2 {
left: 20px;
}

.eff-30 .bubbles .bubble-3 {
left: 60px;
}

.eff-30 .bubbles .bubble-4 {
left: 90px;
}

.eff-30 .bubbles .bubble-5 {
left: 120px;
}

.eff-30 .bubbles .bubble-6 {
left: 150px;
}

.eff-30 .bubbles .bubble-7 {
left: 250px;
}

.eff-30 .bubbles .bubble-8 {
left: 300px;
}

.eff-30 .bubbles .bubble-9 {
left: 190px;
}

.eff-30 .bubbles .bubble-10 {
left: 220px;
}

.eff-30 .bubbles .bubble-11 {
left: 270px;
}

.eff-30 .bubbles .bubble-12 {
left: 45px;
}

.eff-30 .bubbles .bubble-13 {
left: 15px;
}


І @keyframes (докладніше про який я написала в ефекті #25) для них самий простий, складається з двох ключових точок:


@keyframes bubble {
from {
top: 100%;
}
to {
top: -100%;
}
}


Збираємо ефект.

Додаємо анімацію блоку з іконкою, animation детально розглядалося в ефекті #25, параметр animation-fill-mode в ефекті #27:

.eff-30:hover .overlay {
animation: bounce 0.6 s linear forwards;
}


Потім запускаємо бульбашки. Викликаємо анімацію для них. В даному випадку ми використовуємо, крім інших, розглянутих в ефекті #25 параметрів, параметр animation-iteration-count зі значенням infinite, що означає, що анімація буде програватися нескінченну кількість разів. Поки курсор знаходиться на блок з ефектом, бульбашки не перестануть летіти:

.eff-30:hover .bubbles .bubble {
animation: bubble 9s infinite;
}


Тепер, щоб бульбашки вилітали ще і в різний час, виставимо їм затримку:

.eff-30:hover .bubbles .bubble-2 {
animation-delay: 2s;
}

.eff-30:hover .bubbles .bubble-3 {
animation-delay: 6s;
}

.eff-30:hover .bubbles .bubble-4 {
animation-delay: 3.5 s;
}

.eff-30:hover .bubbles .bubble-5 {
animation-delay: 4s;
}

.eff-30:hover .bubbles .bubble-6 {
animation-delay: 7.2 s;
}

.eff-30:hover .bubbles .bubble-7 {
animation-delay: 1s;
}

.eff-30:hover .bubbles .bubble-8 {
animation-delay: 2.6 s;
}

.eff-30:hover .bubbles .bubble-9 {
animation-delay: 5s;
}

.eff-30:hover .bubbles .bubble-10 {
animation-delay: 6.4 s;
}

.eff-30:hover .bubbles .bubble-11 {
animation-delay: 8s;
}

.eff-30:hover .bubbles .bubble-12 {
animation-delay: 5.3 s;
}

.eff-30:hover .bubbles .bubble-13 {
animation-delay: 8.5 s;
}


Залишається тільки підняти .caption:

.eff-30:hover .caption {
top: 0px;
transition-delay: 0.7 s;
}


Сподіваюся, моя стаття була вам корисна і надихнула на прикрашання ваших сайтів новими, цікавими ефектами!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.