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

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

demodownload

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是每个文字运行间隔时间，值越大，每个文字运行间隔时间越长，负值表示动画从右向左运动。

JS

实例文字动画使用第三方插件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);
}

h2、.letter-wrap等CSS属性，主要是设置文字位置、大小、颜色等样式，不涉及到动画设置，动画完全由TweenMax.js来完成。

总结

本文介绍了8款文字鼠标悬停动画效果，使用TweenMax.js创建实现。

有关文字动画的文章，也可参考前文lettering.js创建的5款文字按钮鼠标悬停动画效果。

相关文章

• 16款精美的CSS3动画按钮（有悬停动画效果）
• 9个CSS鼠标悬停效果
• 6个CSS按钮边框过渡动画效果
• 一个具有伸缩（鼠标悬停）效果的CSS按钮
• 使用box-shadow实现的7个按钮悬停效果
• 纯CSS3：鼠标移上去三角形(箭头)旋转【实例演示#源码下载】
• CSS悬停效果按钮一简单实例（鼠标移到按钮上变成其他颜色）
• 漂亮的css3圆形鼠标悬停效果实例
• 使用css转换和3d旋转的圆形鼠标悬停效果【2例】
• 很好看的css3动画按钮鼠标悬停效果【2个实例】

• 如何使用CSS为文本添加渐变叠加【实例】
• css3实现的彩色渐变描边文字效果
• 纯CSS实现文字渐变和文字扫光动画效果
• CSS实现文字颜色渐变效果
• CSS3实现的9种文本阴影效果【收藏】
• css text-shadow 轻松实现文字投影/描边/浮雕/剪纸/发光效果