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

Видеоинструкция по подключению

Пошаговая инструкция с подключением кода

ID Шаблона
Категория
Последнее обновление
9 Февраля, 2026
Бесплатные, Эффекты, Текст, Ссылки
40972834
Скриншоты шаблона
Шаг 1
В Zero-блоке создаём необходимую кнопку и вешаем на неё класс shuffle-hover
Шаг 2
В конце страницы или футере добавляем код, через блок T123
CSS / JS

<!--Поэлементная анимация текста по наведению-->
<!--https://mt-webdesign.ru/element-wise-->
<style>
.shuffle-hover-inside {
position: relative !important;
display: flex !important;
white-space: nowrap !important;
}
.shuffle-hover-inside:before {
content: '';
display: none;
width: 100%;
height: 1px;
background-color: transparent;
position: absolute;
bottom: 0;
}
.shuffle-hover-inside:hover:before {
content: '';
display: none;
width: 100%;
height: 1px;
background-color: black;
position: absolute;
bottom: 0;
}
.shuffle-hover-text {
position: relative;
display: inline-block;
white-space: nowrap;
}
</style>
<script>
$('.shuffle-hover .tn-atom').addClass('shuffle-hover-inside');
jQuery(document).ready(function($) {
var shuffleElement = $('.shuffle-hover-inside');
var animationInProgress = false;
shuffleElement.each(function() {
var $el = $(this);
var $link = $el.find('a');
if ($link.length) {
$link.attr('data-text', $link.text());
} else {
$el.attr('data-text', $el.text());
}
});
shuffleElement.on('mouseenter', function() {
if (animationInProgress) return;
var $el = $(this);
var $link = $el.find('a');
var $target = $link.length ? $link : $el;
var originalText = $link.length
? $link.data('text')
: $el.data('text');
animationInProgress = true;
shuffleText($target, originalText, 500, function() {
animationInProgress = false;
});
});
function shuffleText(target, originalText, duration, onComplete) {
var spaces = [];
var letters = [];
for (var i = 0; i < originalText.length; i++) {
if (originalText[i] === ' ') {
spaces.push(i);
} else {
letters.push(originalText[i]);
}
}
var index = 0;
function step() {
if (index < letters.length) {
var r = Math.floor(Math.random() * letters.length);
var tmp = letters[index];
letters[index] = letters[r];
letters[r] = tmp;
var result = [];
var l = 0;
for (var i = 0; i < originalText.length; i++) {
if (spaces.includes(i)) {
result[i] = ' ';
} else {
result[i] = letters[l++];
}
}
target.text(result.join(''));
index++;
setTimeout(step, duration / letters.length);
} else {
target.text(originalText);
onComplete();
}
}
step();
}
});
</script>

Более подробные настройки, возможности взаимодействия и подключение в видео

Инструкция с копированием шаблона к себе

Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (ID Шаблона), нажимаем кнопку «Выбрать»
Шаг 3