Как исключить первый символ из обработки скриптом?
Приветствую! Силами коллективного разума был доработан скрипт старения шрифта. Однако он срабатывает только для первого элемента dom. Начиная со второго повторяющегося элемента уже опять первый символ обрабатывается. Подскажите: что делаю не так? Спасибо!
const typing = document.querySelectorAll('.about-content-1');
function type(element) {
function randomOpacity() {
return (Math.floor(Math.random() * 50) + 50)/100;
}
function randomEms() {
if (Math.random() > .8) {
return (Math.floor(Math.random() * 100) - 50)/800;
}
else {
return 0;
}
}
function wrap(char,i) { // попытка исключить из обработки первый символ
if( i === 0 ) return '<span style="padding-left: 30px; font-family: Pattaya; font-size: 28px; font-weight: 600; color: #743f49;">'+char+'</span>';
return '<span style="opacity:' + randomOpacity() + '; text-shadow:' + randomEms() + 'em ' + randomEms() + 'em currentColor;">' + char + '</span>';
}
const wrappedText = Array.from(element.textContent).map(wrap);
element.innerHTML = wrappedText.join('');
}
typing.forEach(type);
|
maiskiykot,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Извините за глупый вопрос, но как это должно выглядеть?
https://prnt.sc/dEw3AD3nhVXK Ваш скрипт обрабатывает все символы:) |
Это сложно для меня. Просто может что-то изменить в этом коде?
Разметка примерно такая: <div class="content-1"><p>Текст 1</p></div> <div class="content-1"><p>Текст 2</p></div> <div class="content-1"><p>Текст 3</p></div> |
Цитата:
|
Вы не могли бы показать/описать, что должно получиться по итогу?:)
https://prnt.sc/mFoi5-UU5FGe |
Цитата:
что не так? все элементы с классом about-content-1 обрабатываются одинаково.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="about-content-1">12345</div>
<div class="about-content-1">12345</div>
<script>
const typing = document.querySelectorAll('.about-content-1');
function type(element) {
function randomOpacity() {
return (Math.floor(Math.random() * 50) + 50) / 100;
}
function randomEms() {
if (Math.random() > .8) {
return (Math.floor(Math.random() * 100) - 50) / 800;
} else {
return 0;
}
}
function wrap(char, i) { // попытка исключить из обработки первый символ
if (i === 0) return '<span style="padding-left: 30px; font-family: Pattaya; font-size: 28px; font-weight: 600; color: #743f49;">' + char + '</span>';
return '<span style="opacity:' + randomOpacity() + '; text-shadow:' + randomEms() + 'em ' + randomEms() + 'em currentColor;">' + char + '</span>';
}
const wrappedText = Array.from(element.textContent).map(wrap);
element.innerHTML = wrappedText.join('');
}
typing.forEach(type);
</script>
</body>
</html>
|
По типу, все символы должны иметь различную степень выгорания?
|
У меня в разметке еще <p></p>. Может из-за этого глючит?
|
Цитата:
|
| Часовой пояс GMT +3, время: 13:41. |