Поэлементная анимация текста

Поэлементная анимация текста

Модификация позволяет создать эффект побуквенной смены текста по наведению.

Описание
Видеоинструкция по подключению
Инструкция с копированием шаблона к себе
ID шаблона:
40972834
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
В Zero-блоке создаём необходимую кнопку и вешаем на неё класс shuffle-hover
Шаг 1
Ниже добавляем код, через блок T123.
Шаг 2
<!--Поэлементная анимация текста по наведению-->
<!--https://mt-webdesign.ru/element-wise-->
<style>
/*.shuffle-hover-inside {*/
/* word-wrap: break-word;*/
/*}*/
/*.shuffle-hover-inside:before {*/
/* content: '';*/
/* display: block;*/
/* width: 100%;*/
/* height: 1px;*/
/* background-color: transparent;*/
/* position: absolute;*/
/* bottom: 0;*/
/*}*/
/*.shuffle-hover-inside:hover:before {*/
/* content: '';*/
/* display: block;*/
/* width: 100%;*/
/* height: 1px;*/
/* background-color: black;*/
/* position: absolute;*/
/* bottom: 0;*/
/*}*/
</style>
<script>
$('.shuffle-hover .tn-atom').addClass('shuffle-hover-inside');
jQuery(document).ready(function($) {
var shuffleElement = $('.shuffle-hover-inside');
shuffleElement.each(function() {
$(this).attr('data-text', $(this).text());
});
var animationInProgress = false;
shuffleElement.mouseenter(function() {
if (animationInProgress) return;
var element = $(this);
var originalText = element.data('text');
var animationDuration = 500;
animationInProgress = true;
shuffleText(element, originalText, animationDuration, function() {
animationInProgress = false;
});
});
function shuffleText(element, originalText, duration, onComplete) {
var elementTextArray = originalText.split('');
var currentIndex = 0;
function shuffleStep() {
if (currentIndex < elementTextArray.length) {
var randomIndex = Math.floor(Math.random() * elementTextArray.length);
var temp = elementTextArray[currentIndex];
elementTextArray[currentIndex] = elementTextArray[randomIndex];
elementTextArray[randomIndex] = temp;
element.text(elementTextArray.join(''));
currentIndex++;
setTimeout(shuffleStep, duration / elementTextArray.length);
} else {
element.text(originalText);
onComplete();
}
}
shuffleStep();
}
});
</script>
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
3D галерея
Tilda
Подсказки при наведении курсора
Tilda
© 2022-2023 все права защищены
ИП Нестерчук Кристина Юрьевна
ИНН: 251110424315