Рубрики
Без рубрики

Пишущая машинка анимация с использованием ванильных js и highlight.js

Вы видели анимацию пишущей машинки. Вы видели силу Highlight.js. Теперь вы видите … помечены JavaScript, Highlightjs, WebDev, CSS.

Вы видели анимацию пишущей машинки. Вы видели силу Highlight.js. Теперь вы видите Ultimate Game-Changer: анимация пишущей машинки для выделенного кода, YAY.

Большая часть анимации там работает только для одной строки текста. Некоторые даже охватывают несколько строк, но поддерживают только предварительно определенную текстовую разметку. Не идеально, давайте начнем.

Выделите какой-нибудь код сначала

Для демонстрационных целей мы используем код из библиотеки запросов Python запросов на GitHub.

def get_encoding_from_headers(headers): """Returns encodings from given HTTP Header Dict. :param headers: dictionary to extract encoding from. :rtype: str """ content_type = headers.get('content-type') ...

Инициализируйте библиотеку Highlight.js в соответствии с настройкой вашего проекта, следуя рекомендациям по их использованию. Затем выделите код выше:




На данный момент мы здесь (минус стайлинг контейнера):

Анимитные узлы, не отдельных персонажей

Борьба с анимационным кодом пришла из того факта, что различные подсветки создают свою собственную разметку. Если мы попытаемся анимировать текст только, мы получаем желаемый эффект пишущего машинки, но мы теряем выделение. Если мы анимируем весь HTML, мы можем получить выделение, но это включает в себя саму разметку, например, мы печатаем на диване.

Итак, мы анимировали узлы. Это идет так:

var children = Object.values(document.getElementById('code').childNodes);

target.innerText = '';

type(0);

Получите все дочерние узлы выделенного кода, пустое заполнителей и начните отображать узлы, начиная с первого.

function type(i) {
    // Little helper
    function randomNumber(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }
    // Make the content visible
    if (i === 0) {
        target.style.visibility = 'visible';
    }
    // When we've displayed all the nodes
    // Just start over
    if (i >= children.length) {
        i = 0;
        target.innerText = '';
    }
    // Append each node to the target code placeholder
    // And scroll that div if the code scrolls past it
    if (children.hasOwnProperty(i)) {
        target.appendChild(children[i]);
        target.scrollTop = target.scrollHeight;
    }
    // Step to the next node
    i++;
    // Repeat the process
    // after a variable amount of time
    setTimeout(function () {
        type(i);
    }, randomNumber(200, 500));
}

И это это для JS.

Бонусное улучшение стилизации

До сих пор мы работали с этим минимальным стилем CSS:

#code {
  white-space: pre; /* So the code won't wrap */
  width: 600px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: auto; /* You know, so it doesn't overflow*/
  overflow-y: auto;
  visibility: hidden; /* The yet unhighlighted code better hide */
}

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

#code:after{
    content: "|";
    animation: blink 500ms linear infinite alternate;
}

@-webkit-keyframes blink{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

@-moz-keyframes blink{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

@keyframes blink{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

Кроме того, эти прокрутки становятся довольно уродливыми. Мы не нуждаются в них в нашем случае так:

#code::-webkit-scrollbar {
    display: none;
}
#code {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

И вот и все, наконец. Проверьте это на Кодепен и увидимся в действии на мой сайт Отказ

Оригинал: “https://dev.to/genijaho/typewriter-animation-using-vanilla-js-and-highlight-js-1ecc”