3d tranforming/animating individual characters/words in a paragraph

user_16539200 0
Viewed 25

I would like to animate portions of a paragraph. If I transform my p tag it transforms the entire box.

I've seen this done before and I'm kicking myself for not saving the stackoverflow answer to it, and now I've been searching for an answer for over an hour and can't seem to find it or any way to solve it.

Basically, I'd like the letters that the cursor hover over to pop out from the text some. I thought this could be done with CSS but javascript is welcome as well.

css html javascript
1 Answers

You can use JavaScript to wrap each letter in a span, then apply your styling when span:hover. The JavaScript below does this for each letter that isn't a space.

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 = result;
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>

user_167155080
Related