利用HTML5實現英文字母懸停翻轉動畫特效



12 44 15



特效描述:利用HTML5實現 英文字母 懸停翻轉 動畫特效,利用HTML5實現英文字母懸停翻轉動畫特效

代碼結構

1. 引入JS

<script src="js/TweenMax.min.js"></script>

2. HTML代碼

<ul class="grid">
  <li class="grid__item">
    <h2 class="letter-wrap">Hello world</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.4" data-stagger="0.1">Good morning</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.2" data-stagger="-0.05">Great days are coming</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.1" data-stagger="0.1">Live for tomorrow</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-stagger="-0.015">Roll with the punches</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="1" data-stagger="0.025">Have a blast</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.8" data-stagger="-0.025">Bet on black</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.1" data-stagger="-0.075">Tuck and roll</h2>
  </li>
</ul>
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 旋轉翻轉 旋轉 翻轉 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 文字翻轉 文字旋轉 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 分析股票 股票行情软件下载 济南沐足技师招聘 腾讯分分彩预测的软件下载 十一运夺金下载 体彩p5走势图带连线 新西兰4.5彩官网 辽宁cba比分 哈灵浙江麻将官网APP 西甲联赛 新天地棋牌下载? 熊猫棋牌游戏中心 海口小姐服务 微乐贵阳麻将下载安装ios 大发官网网址是多少 中国足彩比分直播网