Эффект растягивания текста на изображении с помощью CSS3

Эффект растягивания текста на изображении с помощью CSS3

От автора: Эффект растягивания появляющегося текста, используемый в данной статье, состоит из двух частей, каждая из которых выполняется после того, как другая завершится. Добиться данного эффекта можно лишь с помощью использования директивы @keyframes в CSS3.

демо

Эффект, описанный в данной статье, нельзя получить, используя лишь CSS свойство transition, которое использовалось в упомянутых выше статьях. Данный эффект состоит из двух анимаций, каждая из которых начинается только после завершения предыдущей.

HTML код:

<a href="#" title="How to improve CSS code"><img src="nature.jpg" alt=""></a>

Вышеприведенный код – это пример обычной ссылки, внутри которой размещено изображение. Атрибут 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;
}

a:after {
  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:

Источник: http://basicuse.net/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree