Ефект розтягування тексту на зображенні за допомогою CSS3

16

Від автора: Ефект розтягування з’являється тексту, що використовується в цій статті, складається з двох частин, кожна з яких виконується після того, як інша завершиться. Домогтися цього ефекту можна лише з допомогою використання директиви @keyframes в CSS3.

Ефект розтягування тексту на зображенні за допомогою CSS3

Ефект, описаний у даній статті, можна отримати, використовуючи лише CSS властивість transition, яке використовувалося у згаданих вище статтях. Даний ефект складається з двох анімацій, кожна з яких починається тільки після завершення попередньої.

HTML код:

Ефект розтягування тексту на зображенні за допомогою CSS3

Вищенаведений код – це приклад звичайної посилання, всередині якої розміщено зображення. Атрибут title зображення буде використаний в якості з’являється тексту.

CSS-стилі, представлені в цій статті, застосовуються до кожної посиланню, наприклад, до тієї, що знаходиться зверху. А тепер давайте розглянемо одну таку посилання і дізнаємося, як наш ефект працює.

Як вже згадувалося, сам ефект складається з двох анімацій, які застосовуються до блоку, в якому міститься з’являється текст. Даний блок додається за допомогою CSS псевдо-елемента before, а текст береться з атрибута title у поточній посилання.
За замовчуванням блок з появляються текстом прихований, тобто в даному випадку він схлопнут по вертикалі. Дане умова виконується завдяки використанню функції scaleY, зі значенням рівним нулю, CSS властивості transform. В цей же час блок розтягується по горизонталі за допомогою функції scaleX, зі значенням рівним 4, CSS властивості transform. Текст в блоці буде прозорим, т. до. ми використовували RGBA запис кольору і вказали значення для альфа-каналу дорівнює нулю.

Коли користувач наводить курсор миші на зображення, перша анімація розтягує текст по вертикалі, щоб він був видимим. Дана анімація змінює значення функції scaleY на 1. Після завершення першої анімації, починає виконуватися друга: вона схлопывает блок до початкових розмірів, змінюючи значення функції scaleX на 1 і, одночасно, роблячи текст непрозорим завдяки зміні значення альфа-каналу на 1.

Коли користувач уводить курсор, зображення, обидві анімації знову виконуються, але вже в зворотному порядку.
Крім блоку з появляються текстом, є ще один блок, який додається з допомогою CSS псевдо-елемента after. Цей блок завжди є прозорим і ніяк не пов’язаний з анімаціями. Його єдине призначення – виправити баг, що виникає при наведенні, в IE10.

Ось CSS стилі:

@-webkit-keyframes appearing {
0%{
-webkit-transform: scaleX(4) scaleY(0) translateY(-50%);
}
50%{
-webkit-transform: scaleX(4) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 0);
}
100% {
transform: scaleX(1) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 1);
}
}
@keyframes appearing {
0%{
transform: scaleX(4) scaleY(0) translateY(-50%);
}
50%{
transform: scaleX(4) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 0);
}
100% {
transform: scaleX(1) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 1);
}
}
@-webkit-keyframes disappearing {
0%{
-webkit-transform: scaleX(1) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 1);
}
50%{
-webkit-transform: scaleX(4) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 0);
}
100% {
-webkit-transform: scaleX(4) scaleY(0) translateY(-50%);
}
}
@keyframes disappearing {
0%{
transform: scaleX(1) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 1);
}
50%{
transform: scaleX(4) scaleY(1) translateY(-50%);
color: rgba(255, 255, 255, 0);
}
100% {
transform: scaleX(4) scaleY(0) translateY(-50%);
}
}
@-webkit-keyframes positioning {
0%{ z-index: 10; }
99%{ z-index: 10; }
100% { z-index: 1; }
}
@keyframes positioning {
0%{ z-index: 10; }
99%{ z-index: 10; }
100% { z-index: 1; }
}
a {
display: inline-block;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
}
a:before {
-webkit-animation: disappearing 500ms ease-in-out forwards;
animation: disappearing 500ms ease-in-out forwards;
background-color: rgba(0, 0, 0, 0.6);
color: rgba(255, 255, 255, 0);
content: attr(title);
display: block;
font-family: Tahoma;
font-size: 24px;
font-weight: bold;
padding: 5% 2%;
position: absolute;
text-transform: uppercase;
top: 50%;
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
width: 96%;
z-index: 5;
}
a img {
-webkit-animation: positioning 510ms ease-in-out forwards;
animation: positioning 510ms ease-in-out forwards;
border: none;
display: block;
position: relative;
z-index: 10;
}
after a: {
opacity: 0;
background-color: white;
content: «»;
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 15;
}
a:hover:before {
-webkit-animation: appearing 500ms ease-in-out forwards;
animation: appearing 500ms ease-in-out forwards;
}

Дані CSS стилі чудово працюють в останніх версіях сучасних браузерів, таких як Firefox, Chrome, Opera, Safari і Internet Explorer 10 версії і вище.

Ось невелике превью ефекту у форматі GIF:

Ефект розтягування тексту на зображенні за допомогою CSS3