html5+TweenMax.js鼠标悬停文字翻转动画特效免费下载

8种动画效果十分流畅的html5+TweenMax.js鼠标悬停文字翻转动画特效,支持英文字母和中文汉字。

JS代码

<script src="js/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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录