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>
