Языковая политика

Прочее => Разговоры о всяком => Topic started by: cetsalcoatle on 09 April 2025, 02:40:29

Title: Анимация шрифтов
Post by: cetsalcoatle on 09 April 2025, 02:40:29

У меня сегодня появилась такая картинка перед глазами: арабский текст, который появляется дымкой как джинн, синий (как Джинн из "Алладина") и трёхмерный.

Как такое сделать?
Как трёхмерность делают в CSS и какие методы JS используют для анимации текста? :what?

PS Я понимаю, что есть 100500 библиотек с готовыми решениями на все случаи жизни, но я хочу понять саму механику. :uo:

Title: Re: Анимация шрифтов
Post by: cetsalcoatle on 09 April 2025, 10:48:02

Нашёл, не так уж и сложно оказалось:

Quote

1. Typewriter effect
The typewriter effect simulates the nostalgic feel of text being typed out letter by letter, creating a sense of anticipation and drawing attention to the message.

<div id="typewriter"></div>

<script>
  const text = "Hello, World!";
  let index = 0;

  function type() {
    document.getElementById('typewriter').innerText += text[index];
    index++;
    if (index < text.length) {
      setTimeout(type, 100);
    }
  }

  type();
</script>
2. Text reveal animation
In the text reveal animation, the text is gradually revealed as if it is being revealed layer by layer, creating a sense of tension and mystery.

<div class="reveal-text">
  <span class="hidden-text">Secret Message</span>
</div>

<style>
  .reveal-text {
    overflow: hidden;
    white-space: nowrap;
  }
  .hidden-text {
    position: relative;
    left: -100%;
    animation: reveal 2s forwards;
  }
  @keyframes reveal {
    to { left: 0; }
  }
</style>

Только этот код какой-то древний.. :what?

Title: Re: Анимация шрифтов
Post by: Bhudh on 10 April 2025, 00:50:10

Если с @keyframes, не такой уж и древний, но вот трёхмерности в нём нет совсем.
Это с новыми матрицами в CSS надо играться.