Как оптимизировать скрипт анимации текста
Добрый день. Как можно оптимизировать скрипт
https://codepen.io/zava75/pen/LYPmbxL на es2015 (Оператор разворота (spread operator) и тд) Спасибо. |
zava75,
t.querySelectorAll('div').forEach
|
babbel cod es2015
document.addEventListener('DOMContentLoaded', ready);
function rand(x) {
return Math.random() * x - x * 0.5 + 'px';
}
function ready() {
var sections = document.querySelectorAll('div .section');
for (var i = 0; i < sections.length; ++i) {
var box = sections[i].querySelector('.text');
if (box) {
(function() {
var hideText = function hideText(intel) {
var t = intel.querySelector('.text');
[]
.concat(_toConsumableArray(t.querySelectorAll('div')))
.forEach(function(n, i) {
Object.assign(n.style, {
opacity: 0,
transform:
'translate3d(' +
rand(400) +
', ' +
rand(400) +
', ' +
rand(60) +
')'
});
});
};
var showText = function showText(intel) {
var t = intel.querySelector('.text');
console.log(t);
[]
.concat(_toConsumableArray(t.querySelectorAll('div')))
.forEach(function(n, i) {
Object.assign(n.style, {
opacity: 1,
transform: 'translate3d(0, 0, 0)'
});
});
};
box.innerHTML = []
.concat(_toConsumableArray(box.textContent))
.map(function(n) {
return '<div>' + (n.trim() ? n : ' ') + '</div>';
})
.join('');
hideText(sections[i]);
sections[i].addEventListener('mouseenter', function(e) {
showText(this);
});
sections[i].addEventListener('mouseleave', function(e) {
hideText(this);
});
})();
}
}
}
вот проблемный участок
(function() {
var hideText = function hideText(intel) {
var t = intel.querySelector('.text');
[]
.concat(_toConsumableArray(t.querySelectorAll('div')))
.forEach(function(n, i) {
Object.assign(n.style, {
opacity: 0,
transform:
'translate3d(' +
rand(400) +
', ' +
rand(400) +
', ' +
rand(60) +
')'
});
});
};
|
zava75,
поставить Полифилл для Object.assign или убрать анимацию opacity в css. |
zava75,
в чём задача, сделать код быстрее или для ie? |
Цитата:
|
Text Animation js ie
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>
|
| Часовой пояс GMT +3, время: 15:14. |