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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791