JavaScript

Подскажите, как сделать мигание букв в java Script

Здравствуйте!
У меня есть задумка. Я написала небольшой стишок строк на 12 и хочу его очень необычно презентовать одному человеку.
Я вижу так: постепенно буква за буквой в хаотичном порядке на экране возникают буквы (для этого планирую использовать fadeIn).

Теперь вопросы.
Как разбить стих на буковки? Массив?
Закатать каждую букву в div и присвоить ей id?
Нужен ли timeout? ведь каждая буква будет проясняться не сразу после загрузки страницы.
Как добиться рандомности?
Изначально я хотела сделать размытие с дальнейшим прояснением вместо fadeIn. Есть такой способ в скрипте? Как он называется?
Теперь самое важное. Поскольку я новичок в скрипте, то в какой последовательности работать? (Типа псевдокода нужно. Ну там сперва создай переменную, примени функцию timeout, затем фунцию fadeIn).
Пожалуйста, не надо за меня делать мою работу. Я учусь, мне интересно, но я мало чего понимаю. Просто ответьте на вопросы.
Div это блок. Лучше использовать строчный элемент span. Например завернуть весь стих в параграф (p) и каждую букву в span. Далее в css с помощью селектора span можно применить свойство "opacity: 0". Так все буквы завёрнутые в span будут невидимые и на своих местах. После этого можно написать скрипт, который в случайном порядке будет выбирать элемент из массива букв и устанавливать css свойство "opacity: 1". Массив можно получить с помощью функции let bukvi = document.querySelectorAll("span"). А случайная буква будет выбираться так bukvi[случайное_число]. Случайное число можно получить функцией math.random, но тебе нужно будет загуглить как получить случайное число в определённом диапазоне от 0 до bukvi.length

Устал писать) Надеюсь много полезного дал)
Валентин Пашнев
Валентин Пашнев
1 745
Лучший ответ
**иван** ******** Спасибо! Пока понятно, много полезного. Пойду пробовать.
**иван** ******** Артем, можно Вас попросить связаться со мной по email tigertom@yandex.ru Есть еще вопросы по этому заданию. Или могу написать здесь.
**иван** ******** function myFunc() {
let bukvi = document.querySelectorAll( ".opas" );
for( let i = 0; i < bukvi.length; i++){
bukvi[i].style.opacity = "1";
}
}
const fadeIn = (myFunc, timeout, display) => {
el.style.opacity = 0;
el.style.display = display || 'opas';
el.style.transition = `opacity ${timeout}ms`;
setTimeout(() => {
el.style.opacity = 1;
}, 10);
};
window.onload=setInterval(myFunc, Math.random()*2000);
• Как разбить стих на буковки? Массив?
• Закатать каждую букву в div и присвоить ей id?
— ваш_div.textContent.split(''); даст массив букв. Эти буквы циклом можно завернуть в span, += собрать все span-ы в общую переменную-строку и после цикла вставить обратно в div.innerHTML.

• Нужен ли timeout? ведь каждая буква будет проясняться не сразу после загрузки страницы.
• Как добиться рандомности?
— Получив список всех span-ов через querySelectorAll, так же в цикле каждому элементу можно выдать fadeIn через рандомный setTimeout.
time = 1000 + Math.random() * 5000; // Получится число от 1 сек до 6.

• Изначально я хотела сделать размытие с дальнейшим прояснением вместо fadeIn. Есть такой способ в скрипте? Как он называется?
— fadeIn тоже не "в скрипте". Это обычная функция, которая хитрым способом меняет у элемента opacity от 0 до 1, выдавая элементам CSS-свойство transition. Т. е. и размытие можно делать, вместо opacity в скрипте меняя другие свойства. А blur-эффект можно делать через text-shadow: css-tricks.com/fun-with-blurred-text/

• Теперь самое важное. Поскольку я новичок в скрипте, то в какой последовательности работать?
— в любой. Сначала писать то, что очевидно и понятно, сверху добавляя детали. Заранее нужно настроиться, что первые пару версий программы скорее всего придется выкинуть и начинать сначала))
Роман
Роман
62 360
Нет Данных... Сенсей, вы куда пропадали? Если не секрет конечно : )
Ashat Met1S
Ashat Met1S
15 161
Вместо fadein, напиши в css для span {transition:opacity 1s ease;}. Объясню. Была прозрачность 0,и когда ставим 1,то буква будет появляться плавно. Зачем привлекать jquery, когда есть такое свойство в css))
Виктор Усов
Виктор Усов
2 989
**иван** ******** Затем, что изучается javascript и там учимся делать то, что и так умеем в css