« Анимация при наведение на текст с использованием CSS, HTML и JS »
В сегодняшнем материале, мы бы хотели предложить для вас, текст с анимацией при наведении на него. Данный материал сделан из CSS стилей, HTML и JS кодов. Текст можно использовать в виде логотипа на сайта, или переделать под ссылки в том или ином месте. Смысл самого текста, это - плавная анимация со сменой цвета, при наведении на него. Все цвета, размеры, шрифты можно изменить в CSS стилях.
HTML мы использовали для самого кода, в виде гиперссылки. CSS стили мы использовали для изменения цветовой гаммы, размера шрифта, условного местонахождения текста и т.д. JavaScript мы использовали для плавной анимации, со сменой цвета.
HTML код:
UFIVE.RU
</a>
CSS код:
.rolling-text {
display: inline-block;
font-family: "Exo 2", sans-serif;
font-size: 48px;
line-height: 72px;
letter-spacing: 24px;
height: 72px;
text-decoration: none;
overflow: hidden;
color: #393939;
font-weight: 600;
}
.rolling-text:hover .letter, .rolling-text.play .letter {
transform: translateY(-100%);
}
.rolling-text .block:last-child {
color: #f3be81;
}
.rolling-text .letter {
display: inline-block;
transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.letter:nth-child(1) {
transition-delay: 0s;
}
.letter:nth-child(2) {
transition-delay: 0.015s;
}
.letter:nth-child(3) {
transition-delay: 0.03s;
}
.letter:nth-child(4) {
transition-delay: 0.045s;
}
.letter:nth-child(5) {
transition-delay: 0.06s;
}
.letter:nth-child(6) {
transition-delay: 0.075s;
}
.letter:nth-child(7) {
transition-delay: 0.09s;
}
.letter:nth-child(8) {
transition-delay: 0.105s;
}
.letter:nth-child(9) {
transition-delay: 0.12s;
}
.letter:nth-child(10) {
transition-delay: 0.135s;
}
.letter:nth-child(11) {
transition-delay: 0.15s;
}
.letter:nth-child(12) {
transition-delay: 0.165s;
}
.letter:nth-child(13) {
transition-delay: 0.18s;
}
.letter:nth-child(14) {
transition-delay: 0.195s;
}
.letter:nth-child(15) {
transition-delay: 0.21s;
}
.letter:nth-child(16) {
transition-delay: 0.225s;
}
.letter:nth-child(17) {
transition-delay: 0.24s;
}
.letter:nth-child(18) {
transition-delay: 0.255s;
}
.letter:nth-child(19) {
transition-delay: 0.27s;
}
.letter:nth-child(20) {
transition-delay: 0.285s;
}
.letter:nth-child(21) {
transition-delay: 0.3s;
}
JS код:
elements.forEach(element => {
let innterText = element.innerText;
element.innerHTML = '';
let textContainer = document.createElement('div');
textContainer.classList.add('block');
for (let letter of innterText) {
let span = document.createElement('span');
span.innerText = letter.trim() === '' ? '\xa0': letter;
span.classList.add('letter');
textContainer.appendChild(span);
}
element.appendChild(textContainer.cloneNode(true));
element.appendChild(textContainer.cloneNode(true));
});
setTimeout(() => {
elements.forEach(element => {
element.classList.add('play');
})
}, 600);
elements.forEach(element => {
element.addEventListener('mouseover', () => {
element.classList.remove('play');
});
});
Демонстративная страница или сайт материала
Установка материалаМы поможем установить данный материал к Вам на сайт
К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!
Комментариев: 0
| |