Блог

Главная - Вопросы по программированию - 3d-преобразование/анимация отдельных символов/слов в абзаце

3d-преобразование/анимация отдельных символов/слов в абзаце

#javascript #html #css

Вопрос:

Я хотел бы анимировать отдельные части абзаца. Если я преобразую свой тег p, он преобразует всю коробку.

Я видел, как это делалось раньше, и я пинаю себя за то, что не сохранил ответ на него в stackoverflow, и теперь я больше часа ищу ответ и, похоже, не могу его найти или найти какой-либо способ его решить.

В принципе, я бы хотел, чтобы буквы, на которые наводится курсор, немного выскакивали из текста. Я думал, что это можно сделать с помощью CSS, но javascript также приветствуется.

Ответ №1:

Вы можете использовать JavaScript , чтобы обернуть каждую букву в a span , а затем применить свой стиль, когда span:hover . Приведенный ниже JavaScript делает это для каждой буквы, которая не является пробелом.

 var text = document.getElementById('jump').innerHTML;
var result = '';
for (var i = 0; i < text.length; i  ) {
    var char = text.substring(i, i   1);
    if (char == ' ') {
        result  = char;    
    } else {
        result  = '<span>'   char   '</span>';
    }
    
}
document.getElementById('jump').innerHTML = resu< 
 p#jump {
    line-height: 30px;

}
#jump span:hover {
    display: inline-block;
    transform: translateY(-10px);
} 
 <p id="jump">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Комментарии:

1. Это здорово! Я думаю, однако, что анимация, которую я видел, преобразует не только одну букву, но и радиус вокруг курсора. Я думаю, что могу отредактировать это, чтобы это сработало для меня, но я все равно хотел бы разобраться и в этом.

2. Быстрый способ заставить этот код сделать это-добавить обработчик события наведения , который применяет меньшее преобразование к соседним элементам: $(this).prev().css("transform", "translateY(-5px)"); и $(this).next().css("transform", "translateY(-5px)"); . Прежде чем применять новые преобразования, вам нужно будет убедиться, что вы отключили преобразование для остальных spans , прежде чем применять новые преобразования.

Метки: