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());
}
如果觉得《html 文字悬停翻转 html5+TweenMax.js鼠标悬停文字翻转动画特效》对你有帮助，请点赞、收藏，并留下你的观点哦！
