Вы видели анимацию пишущей машинки. Вы видели силу 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”