Как исключить первый символ из обработки скриптом?
Приветствую! Силами коллективного разума был доработан скрипт старения шрифта. Однако он срабатывает только для первого элемента 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>. Может из-за этого глючит?
|
Цитата:
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="content-1"><p>Текст 1</p></div>
<div class="content-1"><p>Текст 2</p></div>
<div class="content-1"><p>Текст 3</p></div>
<script>
const typing = document.querySelectorAll('.content-1 > p');
console.log(typing)
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>
|
Может быть так? Обработка ведется как в тегах абзаца, так и без них, плюс первый символ каждого контейнера about-content-1 оборачивается span c классом, который может быть стилизирован обычным css
<div class="about-content-1"><p>135232614qsfw523rdt235dg3456</p></div>
<div class="about-content-1">13sgsfj4qsfw523rdt235dg3456</div>
<div class="about-content-1">135232615dfj73253456</div>
<script>
const typing = document.querySelectorAll('.about-content-1, .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 class="dont-touch">'+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>
|
Сразу чувствуется рука мастера! Я бы хрен допер до такого решения! Спасибо Рони, Спасибо Дмитрий - оба помогли и изящно! Вопрос решился!
|
Обращайтесь:)
|
| Часовой пояс GMT +3, время: 02:40. |