3d текст с анимацией при помощи CSS3 и JS

И так, давайте пошагово рассмотрим процесс реализации данного эффекта.

Шаг 1. HTML

Разметка представляет собой заголовок второго уровня. Текст внутри тега отображается крупным шрифтом жирного начертания:

Код
<h2>3D ТЕКСТ</h2>
<h2>С АНИМАЦИЕЙ</h2>
<h2>ДЛЯ САЙТА</h2>
<h2>ПРИ ПОМОЩИ CSS3</h2>

Шаг 2. CSS

Нам необходимо указать тени, именно при помощи их мы получим иллюзию объемности, мы установим цвет тени, уровень прозрачности и ширину:

Код
.superShadow {
  text-shadow: 0 1px 0 hsl(174,5%,80%),
  0 2px 0 hsl(174,5%,75%),
  0 3px 0 hsl(174,5%,70%),
  0 4px 0 hsl(174,5%,66%),
  0 5px 0 hsl(174,5%,64%),
  0 6px 0 hsl(174,5%,62%),
  0 7px 0 hsl(174,5%,61%),
  0 1px 3px rgba(0,0,0,.2),
  0 3px 5px rgba(0,0,0,.2),
  0 5px 10px rgba(0,0,0,.2),
  0 8px 0 hsl(174,5%,60%),

0 0 5px rgba(0,0,0,.05),
  0 10px 10px rgba(0,0,0,.2),
  0 20px 20px rgba(0,0,0,.3);
  }

strong{
  font-size:200px;
  }

Также мы устанавливаем необходимый размер текста.

Шаг 3. JavaScript

Нам нужно подключить библиотеку TweenMax и jQuery

Код
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.2/TweenMax.min.js'></script>

Нам необходимо чтобы текст постепенно трансформировался, с обычного текста в объемный, для этого нам понадобится небольшие правила js, мы установим простую постепенную анимацию, и ее скорость.

Код
var tl = new TimelineMax({repeat:6, repeatDelay:1, yoyo:true});
tl.staggerTo("h2", 0.2, {className:"+=superShadow", top:"-=10px", ease:Power1.easeIn}, "0.3", "start")

Вот и все. Готово!

  • FalleN

  • 3189

  • 1

  • 228

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!