利用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

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

老夫子电子 北京pk10官方网 篮球让分胜负胜是客胜还是主胜 体彩6十l开奖结果查询 抢庄牛牛牛安卓版下载 浙体彩20选5走势图 安徽时时彩直播开奖 青海快三走势图案昨天 房地产怎么去赚钱吗 福彩快乐12数据分析工具 大话职业改后种植赚钱吗 新疆时时彩开奖结果时彩走势 20选5奖复式奖金计算 8号彩票安卓 一分快三计划破解 辛运28开奖正负 亚太88彩网址