TweenMax.js创建的8款文字鼠标悬停动画效果

技术频道 - js技术

TweenMax.js创建的8款文字鼠标悬停动画效果

作者:admin 时间:2022-1-27 15:35:24 浏览:

前文介绍了lettering.js创建的5款文字按钮鼠标悬停动画效果，本文继续介绍8款文字鼠标悬停动画效果，使用TweenMax.js创建实现。

HTML

<ul class="grid">
  <li class="grid__item">
    <h2 class="letter-wrap">卡卡测速网</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.4" data-stagger="0.1">webkaka.com</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.2" data-stagger="-0.05">卡卡测速网</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.1" data-stagger="0.1">webkaka.com</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-stagger="-0.015">卡卡测速网</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="1" data-stagger="0.025">webkaka.com</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.8" data-stagger="-0.025">卡卡测速网</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.1" data-stagger="-0.075">webkaka.com</h2>
  </li>
</ul>

文字容器使用h2元素标签，其class值是letter-wrap。

data-duration属性表示动画运行时间，值越大，速度越慢，运行时间越长。

data-stagger是每个文字运行间隔时间，值越大，每个文字运行间隔时间越长，负值表示动画从右向左运动。

实例文字动画使用第三方插件TweenMax.min.js，因此需要引用该JS库文件。

<script src='TweenMax.min.js'></script>
<script>
const letterWrapClass = 'letter-wrap';
const letterWrapElements = document.getElementsByClassName(letterWrapClass);

[...letterWrapElements].forEach(el => {
  letterWrap(el, letterWrapClass);
  letterAnimation(el, letterWrapClass);
});

function letterWrap(el, cls) {
  const words = el.textContent.split(' ');
  const letters = [];

  cls = cls || 'letter-wrap';

  words.forEach(word => {
    let html = '';
    for (var letter in word) {
      html += `
        <span class="${cls}__char">
          <span class="${cls}__char-inner" data-letter="${word[letter]}">
            ${word[letter]}
          </span>
        </span>
      `;
    };

    let wrappedWords = `<span class="${cls}__word">${html}</span>`;
    letters.push(wrappedWords);
  });

  return el.innerHTML = letters.join(' ');
}

function letterAnimation(el, cls) {
  const tl = new TimelineMax({ paused: true });
  const characters = el.querySelectorAll(`.${cls}__char-inner`);
  const duration = el.hasAttribute('data-duration') ? el.dataset.duration : 0.3;
  const stagger = el.hasAttribute('data-stagger') ? el.dataset.stagger : 0.03;

  el.animation = tl.staggerTo(characters, duration, {
    y: '-100%',
    ease: Power4.easeOut },
  stagger);

  el.addEventListener('mouseenter', event => event.currentTarget.animation.play());
  el.addEventListener('mouseout', event => el.animation.reverse());
}
</script>

CSS

h2 {
  font-size: var(--h2-fs);
  text-align: center;
  color: var(--primary-clr);
}

.letter-wrap {
  display: inline-block;
  position: relative;
}

.letter-wrap * {
  pointer-events: none;
}

.letter-wrap__word {
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.letter-wrap__char {
  display: inline-block;
  position: relative;
  text-transform: uppercase;
}
.letter-wrap__char-inner {
  display: inline-block;
}
.letter-wrap__char-inner:after {
  content: attr(data-letter);
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--secondary-clr);
}