Анимация текста с помощью Anime.js

Здравствуйте, сегодня будем анимировать текст с помощью скрипта – Anime.js.

Скачать исходники для статьи можно ниже

Демонстрацию работы данного скрипта можно посмотреть здесь (16 демо-примеров):

“tobiasahlin.com/moving-letters/”

Выбираем нужный анимационный эффект и кликаем по нему. После чего вам предложат HTML, CSS и JavaScript код, который нужно вставить на сайт:

Также полный код странички с вышеуказанными примерами можно найти на github:
“github.com/tobiasahlin/moving-letters”

Давайте же “прикрутим” данный демо-пример к сайту на wordpress!

1. Добавляем скрипт anime.min.js к сайту на wordpress:

Добавить скрипт можно разными способами, но более правильный через файл functions.php (способ 1).

Способ 1: Заходим в файл functions.php и вставляем в него следующий код:

function wpb_adding_scripts() {
wp_enqueue_script('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'); 
wp_register_script('my_amazing_script', 'https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js', array ('jquery', 'jquery-ui'),'1.1', false );
wp_enqueue_script('my_amazing_script');
}
  
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

Чтобы открыть файл functions.php в wordpress – нужно зайти в пункт “Внешний вид”, подпункт “Редактор” и справа в списке шаблонов выбрать – файл functions.php:

Способ 2: Просто вставить его внутрь тега “head” – для этого нужно зайти в файл – header.php найти тег head и вставить слующий код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

Вот как он выглядит между тегами head:

Чтобы открыть файл header.php в wordpress – нужно зайти в пункт “Внешний вид”, подпункт “Редактор” и справа в списке шаблонов выбрать – файл header.php:

2. Вставляем CSS стили:

Заходим в файл – style.css – и вствялем в него следующий код:

.ml1 {
  font-weight: 900;
  font-size: 3.5em;
}

.ml1 .letter {
  display: inline-block;
  line-height: 1em;
}

.ml1 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

.ml1 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #fff;
  transform-origin: 0 0;
}

.ml1 .line1 { top: 0; }
.ml1 .line2 { bottom: 0; }

Чтобы открыть файл style.css в wordpress – нужно зайти в пункт “Внешний вид”, подпункт “Редактор” и по умолчанию у вас откроется файл style.css.

3. Вставляем HTML код + код javascript там, где хотим видеть движущиеся буквы:

Код следующий:

<h1 class="ml1">
  <span class="text-wrapper">
    <span class="line line1"></span>
    <span class="letters">THURSDAY</span>
    <span class="line line2"></span>
  </span>
</h1>

<script>var ml = { timelines: {}};</script>
<script>
// Wrap every letter in a span
$('.ml1 .letters').each(function(){
  $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});
ml.timelines["ml1"] = anime.timeline({loop: true})
  .add({
    targets: '.ml1 .letter',
    scale: [0.3,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 600,
    delay: function(el, i) {
      return 70 * (i+1)
    }
  }).add({
    targets: '.ml1 .line',
    scaleX: [0,1],
    opacity: [0.5,1],
    easing: "easeOutExpo",
    duration: 700,
    offset: '-=875',
    delay: function(el, i, l) {
      return 80 * (l - i);
    }
  }).add({
    targets: '.ml1',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });
</script>

Можно вставить данный код в виджет “HTML”: