5 строк кода помогут вам добиться эффекта набора текста js

JavaScript

предисловие

Как-то смотрел фильм🎬, увидел, как текст один за другим выскакивал на экране, было ощущение, что кто-то печатает, мне это показалось очень интересным, поэтому я тоже реализовал его здесь на js.

Адрес опыта проекта:Эффект набора текста

Адрес исходного кода проекта:Адрес источника

Предварительный просмотр эффекта

Самый простой эффект набора текста

Всего пять строк кода, просто вставьте сюда:

const dom = document.querySelector('.content')
const data = '最简单的打字效果代码'.split('')
    let index = 0
    function writing(index) {
        if (index < data.length) {
            dom.innerHTML += data[index]
            setTimeout(writing.bind(this), 200, ++index)
        }
    }

Разве это не супер просто, теперь просто выполните эту функцию, вы можете увидеть этот эффект:

Принцип реализации:

Установите временной интервал через setTimeout, через равные промежутки времени вставьте соответствующие данные в dom, добавьте 1 к индексу, а затем снова вызовите функцию записи.

Добавить имитацию мигающего курсора после слова

Идеи:

Установите курсор в конце dom через псевдокласс after и задайте циклическую анимацию, которая показывает и прячет, чтобы имитировать мигание курсора.

::after{
    content: '|';
    animation: blink 1s infinite
}
@keyframes blink{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

С помощью анимации CSS3 мы добились эффекта мигающего курсора.

выполнить:

Мы можем поместить приведенный выше код вclass, то выполняемwritingкогда этоclassЕго можно добавить в соответствующий дом.

Реализовать ввод китайских иероглифов плюс пиньинь

Зависит от плагинаpinyin, вы можете установить его через npm

npm install pinyin

Он также очень прост в использовании, нам нужно только передать текст в метод этого плагина, и то, что возвращается, является массивом пиньинь каждого китайского символа.

import Pinyin from 'pinyin'
let data = '汉字'
let pinyinData = Pinyin(data)       //['han', 'zi']

Затем мы можем вставить его после соответствующего текста через строку шаблона:

this.content.innerHTML += `${arr[index]}<sup>(${pinyinData[index]})</sup>`

Таким образом достигается простой эффект добавления пиньинь.

добавить анимацию

Код для добавления анимации тоже очень простой, главное — идея.

Идея, которую я начал, состоит в том, чтобы использовать каждый текстspanЛетка, завернутый вверх, анимация может быть добавлена ​​в каждый пролет. Позже обнаружил, что не работает, потому что каждый раз innerhtml dom на самом деле повторно рендеринг, в этом случае предыдущий пролет всегда будет иметь анимацию, это не тот эффект, который мы хотим.

решение:

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

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

код показывает, как показано ниже:

this.content.innerHTML = this.content.innerHTML.replace(/span-animation/g, '') + `<span class="span-animation">${arr[index]}</span>`

Осознайте эффект:

позже

Это не лучшая практика, это просто случайная мысль, чтобы дать идею другим даосам и вдохновить других, О (∩_∩) О, ха-ха~

Категории