zava75,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body, section {
height: 100%;
background: red;
color: #fff;
}
.box {
max-width: 50vw;
padding: 30px;
position: relative;
font-size: 30px;
line-height: 1.5;
perspective: 400px;
}
div.text {
display: flex;
flex-wrap: wrap;
}
div.text > div.anime > span{
transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
opacity: 0;
}
.section:hover div.text > div.anime > span{
opacity: 1;
}
.section{
border: 1px #0000FF solid;
width: 98%;
margin: 0 auto;
overflow: hidden;
}
.section div.text > div{
display: flex;
}
</style>
<script src="https://unpkg.com/grapheme-splitter@1.0.4/index.js"></script>
<script>
document.addEventListener('DOMContentLoaded', ready);
function rand(x) {
return x * (Math.random() - 0.5) + 'px';
}
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
function animateText(elems, random) {
elems.forEach(function(n, i) {
n.style.transform = random ? 'translate3d(' + [400, 400, 60].map(rand) + ')' :
'translate3d(0, 0, 0)';
n.style.transitionDelay = Math.random() < 0.5 ? (700 + Math.random() * 1200) + 'ms' : '';
});
}
function ready() {
var sections = document.querySelectorAll('div .section');
var splitter = new GraphemeSplitter();
sections.forEach(function(section) {
var box = section.querySelector('.text');
if (box) {
var teg = true;
box.innerHTML = splitter.splitGraphemes(box.innerHTML).map(function(g) {
g = g.trim();
var html = '';
if (g && teg) {
teg = false;
html = '<div class="anime">'
} else if (!g && !teg) {
teg = true;
html = '</div>'
};
return html + '<span>' + (g ? g : ' ') + '</span>'
}).join('');
var spans = section.querySelectorAll('.anime > span');
animateText(spans, true)
section.addEventListener('mouseenter', function(e) {
animateText(spans);
});
section.addEventListener('mouseleave', function(e) {
animateText(spans, true)
});
}
})
}
</script>
</head>
<body>
<div>
<div class="section">
<div class="box">
<div class="text">😂 안녕하세요 1 Animation is the process of creating the illusion of motion and shape change by means of the rapid display of a sequence of static images that minimally differ from each other. The illusion—as in motion pictures in general—is thought to rely on the 🙂</div>
</div>
</div>
</div>
</body>
</html>