Пример:
HTML:
|
1 |
<div class="scramble-text"></div> |
CSS:
|
1 2 3 4 5 6 7 8 9 |
.scramble-text { font-size: 28px; color: #337AB7; text-align: center; padding: 20px; } .dud-text { color: #000; } |
JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
// —————————————————————————————————————————————————— // Помехи // —————————————————————————————————————————————————— class TextScramble { constructor(el) { this.el = el this.chars = '!<>-_\\/[]{}—=+*^?#________' this.update = this.update.bind(this) } setText(newText) { const oldText = this.el.innerText const length = Math.max(oldText.length, newText.length) const promise = new Promise((resolve) => this.resolve = resolve) this.queue = [] for (let i = 0; i < length; i++) { const from = oldText[i] || '' const to = newText[i] || '' const start = Math.floor(Math.random() * 40) const end = start + Math.floor(Math.random() * 40) this.queue.push({ from, to, start, end }) } cancelAnimationFrame(this.frameRequest) this.frame = 0 this.update() return promise } update() { let output = '' let complete = 0 for (let i = 0, n = this.queue.length; i < n; i++) { let { from, to, start, end, char } = this.queue[i] if (this.frame >= end) { complete++ output += to } else if (this.frame >= start) { if (!char || Math.random() < 0.28) { char = this.randomChar() this.queue[i].char = char } output += '<span class="dud-text">'+ char +'</span>' } else { output += from } } this.el.innerHTML = output if (complete === this.queue.length) { this.resolve() } else { this.frameRequest = requestAnimationFrame(this.update) this.frame++ } } randomChar() { return this.chars[Math.floor(Math.random() * this.chars.length)] } } // —————————————————————————————————————————————————— // Фразы // —————————————————————————————————————————————————— const phrases = [ 'Привет!', 'Это эффект скремблирования', 'или перемешивание текста', 'на JavaScript' ] const el = document.querySelector('.scramble-text') const fx = new TextScramble(el) let counter = 0 const next = () => { fx.setText(phrases[counter]).then(() => { setTimeout(next, 1000) }) counter = (counter + 1) % phrases.length } next() |
Если выношу скрипт в отдельный файл то не работает. Как исправить?
Скрипт подключается ниже html кода?
Если нет, то нужно поместить его в
[code]document.addEventListener("DOMContentLoaded", () => {
// тут код скрипта
});[/code]
Добрый день. как сделать, чтобы это каждая фраза отображалась на новой строчке (с новым классом), и не было зациклено?
например, чтобы сделать так пункты меню.
Либо разбирать и менять этот код (тут 2-мя правками не обойтись) или использовать другой, например, как тут - [url="https://atuin.ru/blog/fiksirovannoe-gamburger-menyu/"]гамбургер-меню[/url], где вывод осуществляется через задержку [i]animation-delay[/i]
Cпасибо большое автор просто пука не поленюсь и оставлю отзыв все работает 5++