А можно ли на javascript реализовать эффект когда буквы прилетают из-за экрана и встают в текст?

Question

[Роман]

Здравствуйте.

Я когда-то давно работал с Macromedia Flash, и там можно было всякие красивые текстовые эффекты создавать. И мне интересно - можно ли сделать такое на JavaScript? В частности интересует как сделать чтобы буквы поочередно прилетали со стороны юзера и обретая непрозрачный вид и уменьшаясь становились на свои места в тексте (описал как мог))

Как такое сделать?

Спасибо.

Comments

[dollar]

Можно.
Запрограммировать можно вообще всё, что душа пожелает.
Правда, лично я такие сайты со свистелками сразу закрываю.

Answer 1

[0xD34F]

HTML

<span>hello, world!!... fuck the world... fuck everything</span>

CSS

body {
  margin: 0;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

span {
  color: red;
  font-size: 24px;
  font-family: monospace;
}

.xxx {
  display: inline-block;
  min-width: 10px;
  transition: all 0.2s;
  transform: scale(1);
}

.hidden {
  opacity: 0;
  transform: scale(30);
}

JS

function show(el) {
  el.innerHTML = Array
    .from(el.innerText, n => `<span class="xxx hidden">${n}</span>`)
    .join('');

  el.querySelectorAll('span').forEach((n, i) => {
    setTimeout(() => n.classList.remove('hidden'), 100 * i);
  });
}

show(document.querySelector('span'));

https://jsfiddle.net/xw6acvnb/

Comments

[Роман]

вау! это оно!)) спасибо!