Здравствуйте!
У меня есть задумка. Я написала небольшой стишок строк на 12 и хочу его очень необычно презентовать одному человеку.
Я вижу так: постепенно буква за буквой в хаотичном порядке на экране возникают буквы (для этого планирую использовать fadeIn).
Теперь вопросы.
Как разбить стих на буковки? Массив?
Закатать каждую букву в div и присвоить ей id?
Нужен ли timeout? ведь каждая буква будет проясняться не сразу после загрузки страницы.
Как добиться рандомности?
Изначально я хотела сделать размытие с дальнейшим прояснением вместо fadeIn. Есть такой способ в скрипте? Как он называется?
Теперь самое важное. Поскольку я новичок в скрипте, то в какой последовательности работать? (Типа псевдокода нужно. Ну там сперва создай переменную, примени функцию timeout, затем фунцию fadeIn).
Пожалуйста, не надо за меня делать мою работу. Я учусь, мне интересно, но я мало чего понимаю. Просто ответьте на вопросы.
JavaScript
Подскажите, как сделать мигание букв в java Script
Div это блок. Лучше использовать строчный элемент span. Например завернуть весь стих в параграф (p) и каждую букву в span. Далее в css с помощью селектора span можно применить свойство "opacity: 0". Так все буквы завёрнутые в span будут невидимые и на своих местах. После этого можно написать скрипт, который в случайном порядке будет выбирать элемент из массива букв и устанавливать css свойство "opacity: 1". Массив можно получить с помощью функции let bukvi = document.querySelectorAll("span"). А случайная буква будет выбираться так bukvi[случайное_число]. Случайное число можно получить функцией math.random, но тебе нужно будет загуглить как получить случайное число в определённом диапазоне от 0 до bukvi.length
Устал писать) Надеюсь много полезного дал)
Устал писать) Надеюсь много полезного дал)
• Как разбить стих на буковки? Массив?
• Закатать каждую букву в 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/
• Теперь самое важное. Поскольку я новичок в скрипте, то в какой последовательности работать?
— в любой. Сначала писать то, что очевидно и понятно, сверху добавляя детали. Заранее нужно настроиться, что первые пару версий программы скорее всего придется выкинуть и начинать сначала))
• Закатать каждую букву в 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/
• Теперь самое важное. Поскольку я новичок в скрипте, то в какой последовательности работать?
— в любой. Сначала писать то, что очевидно и понятно, сверху добавляя детали. Заранее нужно настроиться, что первые пару версий программы скорее всего придется выкинуть и начинать сначала))
Нет Данных...
Сенсей, вы куда пропадали? Если не секрет конечно : )
Как-то так https://jsfiddle.net/hjak1swb/
Вместо fadein, напиши в css для span {transition:opacity 1s ease;}. Объясню. Была прозрачность 0,и когда ставим 1,то буква будет появляться плавно. Зачем привлекать jquery, когда есть такое свойство в css))
**иван** ********
Затем, что изучается javascript и там учимся делать то, что и так умеем в css
Похожие вопросы
- В чем разница C++ и Java-Script
- Java script (нужен код для wallpeper engine)
- Как сделать проверку пустоты массива в Java Script .
- Здравствуйте, друзья! Нужна помощь в CSS3, HTML 5 и Java Script
- Шахматная доска Нужен код шахматной доски используя java script и table-td-tr,напишите код пожалуйстаю
- Java Script задание с массивом
- Что может ява скрипт (Java Script)? Опишите в кратце.
- подключение и доступ к файлам java script
- Java Script простым языком
- Задача на Java Script. Олень взял в "Быстрозайм" $10 под 10% в день. Сколько он будет должен отдать через 100 дней?
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);