Ответ 1

Я хочу, чтобы это слово было нарисовано с помощью анимации, так что страница "пишет" слово так же, как мы

Версия холста

Это приведет к тому, что отдельные символы будут больше похожи на записи вручную. Он использует длинный штрих-код, в котором порядок включения/выключения менялся со временем за char. Он также имеет параметр скорости.

^{Пример анимации (см. демонстрацию ниже)}

Чтобы повысить реализм и органическое чувство, я добавил случайный интервал между буквами, смещение по треугольнику, прозрачность, очень тонкое вращение и, наконец, использование уже "рукописного" шрифта. Они могут быть завернуты как динамические параметры, чтобы обеспечить широкий диапазон "стилей записи".

Для еще более реалистичного просмотра потребуются данные о пути, которые не по умолчанию. Но это короткий и эффективный фрагмент кода, который приближается к ручному поведению и легко реализуется.

Как это работает

Определяя шаблон тире, мы можем создавать маршевые муравьи, пунктирные линии и так далее. Воспользовавшись этим, определив очень длинную точку для "выключенной" точки и постепенно увеличивая точку "on", она даст иллюзию рисования линии при глажении при анимации длины точки.

Так как длина точки слишком длинная, повторяющийся шаблон не будет виден (длина будет варьироваться в зависимости от размера и характеристик используемого шрифта). Путь буквы будет иметь длину, поэтому нам нужно убедиться, что мы имеем каждую точку, по крайней мере, покрывающую эту длину.

Для букв, которые состоят из нескольких путей (f.ex.O, R, P и т.д.), поскольку один для контура, один для полого участка, линии будут отображаться одновременно. Мы не можем много сделать с этим методом, поскольку для этого потребуется доступ к каждому сегменту пути, который должен быть поглажен отдельно.

Совместимость

Для браузеров, которые не поддерживают элемент canvas, альтернативный способ отображения текста может быть помещен между тегами, например стилизованный текст:

<canvas ...>
    <div class="txtStyle">STROKE-ON CANVAS</div>
</canvas>

Demo

Это создает живой анимированный штрих-код (без зависимостей) -

var ctx = document.querySelector("canvas").getContext("2d"),
    dashLen = 220, dashOffset = dashLen, speed = 5,
    txt = "STROKE-ON CANVAS", x = 30, i = 0;

ctx.font = "50px Comic Sans MS, cursive, TSCu_Comic, sans-serif"; 
ctx.lineWidth = 5; ctx.lineJoin = "round"; ctx.globalAlpha = 2/3;
ctx.strokeStyle = ctx.fillStyle = "#1f2f90";

(function loop() {
  ctx.clearRect(x, 0, 60, 150);
  ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
  dashOffset -= speed;                                         // reduce dash length
  ctx.strokeText(txt[i], x, 90);                               // stroke letter

  if (dashOffset > 0) requestAnimationFrame(loop);             // animate
  else {
    ctx.fillText(txt[i], x, 90);                               // fill final letter
    dashOffset = dashLen;                                      // prep next char
    x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
    ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random());        // random y-delta
    ctx.rotate(Math.random() * 0.005);                         // random rotation
    if (i < txt.length) requestAnimationFrame(loop);
  }
})();

canvas {background:url(http://i.imgur.com/5RIXWIE.png)}

<canvas width=630></canvas>

Ответ 2

Редактировать 2019

Я создал библиотеку JavaScript, которая может создавать реалистичные анимации. Он прост в использовании и требует специального файла JSON, который действует как шрифт.

var vara = new Vara("#container", "https://rawcdn.githack.com/akzhy/Vara/ed6ab92fdf196596266ae76867c415fa659eb348/fonts/Satisfy/SatisfySL.json", [{
  text: "Hello World!!",
  fontSize: 48,
  y:10
}, {
  text: "Realistic Animations",
  fontSize: 34,
  color:"#f44336"
}], {
  strokeWidth: 2,
  textAlign:"center"
});

#container {
  padding: 30px;
}

<script src="https://rawcdn.githack.com/akzhy/Vara/16e30acca2872212e28735cfdbaba696a355c780/src/vara.min.js"></script>
<div id="container"></div>

Ответ 3

Только CSS:

@keyframes fadein_left {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}

#start:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0%;
  opacity: 0.7;
  height: 25px;
  background: #fff;
  animation: fadein_left 3s;
}

<div id="start">
  some text some text some text some text some text
</div>