html 文字悬停翻转,html5+TweenMax.js鼠标悬停文字翻转动画特效

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

查看演示

下载资源：

14

次 下载资源

下载积分：

20

积分

js代码

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 += `

${word[letter]}

`;

};

let wrappedWords = `${html}`;

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());

}