Каков самый элегантный способ показать HTML-букву html буквой (например, подписи видеоигр) с использованием CSS и JavaScript?
Хотя я уверен, что его можно решить с помощью подхода грубой силы (скажем, разбивая символы и печатать их один за другим с помощью jQuery.append()), я надеюсь, что некоторые CSS3 (псевдоэлементы?) или волшебство JQuery, чтобы сделать это более элегантно.
Дополнительные точки, если решение рассматривает внутренний HTML-контент.
HTML
<div id="msg"/>
Javascript
var showText = function (target, message, index, interval) {
if (index < message.length) {
$(target).append(message[index++]);
setTimeout(function () { showText(target, message, index, interval); }, interval);
}
}
Позвоните:
$(function () {
showText("#msg", "Hello, World!", 0, 500);
});
Если гладкое раскрытие разумно, я думаю, что это должно быть довольно просто. Непроверенный, но это то, как я предполагаю, что это сработает.
HTML
<div id="text"><span>The intergalactic space agency</span></div>
CSS
div#text { width: 0px; height: 2em; white-space: nowrap; overflow: hidden; }
JQuery
var spanWidth = $('#test span').width();
$('#text').animate( { width: spanWidth }, 1000 );
Хорошо, я не мог удержаться и сделал скрипку. Одна небольшая ошибка кода, которую я исправил. Выглядит хорошо, хотя!
Вам действительно нужно просто append или показать/скрыть.
Однако, если по какой-то нечетной причине вы не хотите изменять свой текст, вы можете использовать этот кусок кода чрезмерно сложный для не-доброго:
HTML:
<p>I'm moving slowly...<span class="cover"></span></p>
CSS
p {
font-family: monospace;
float: left;
padding: 0;
position: relative;
}
.cover {
height: 100%;
width: 100%;
background: #fff;
position: absolute;
top: 0;
right: 0;
}
JQuery
var $p = $('p'),
$cover = $('.cover'),
width = $p.width(),
decrement = width / $p.text().length;
function addChar()
{
$cover.css('width', '-=' + decrement);
if ( parseInt( $cover.css('width') ) < width )
{
setTimeout(addChar, 300);
}
}
addChar();
И, наконец, здесь скрипка: http://jsfiddle.net/dDGVH/236/
Но, серьезно, не используйте это...
100% ванильный javascript, строгий режим, ненавязчивый html,
function printLetterByLetter(destination, message, speed){
var i = 0;
var interval = setInterval(function(){
document.getElementById(destination).innerHTML += message.charAt(i);
i++;
if (i > message.length){
clearInterval(interval);
}
}, speed);
}
printLetterByLetter("someElement", "Hello world, bonjour le monde.", 100);
Я сделал для этого крошечный плагин jquery. Сначала вам нужно убедиться, что текст будет виден, если javascript отключен, а если нет, повторите отображение текстовой буквы по букве.
$.fn.retype = function(delay) {
var el = this,
t = el.text(),
c = t.split(''),
l = c.length,
i = 0;
delay = delay || 100;
el.empty();
var interval = setInterval(function(){
if(i < l) el.text(el.text() + c[i++]);
else clearInterval(interval);
}, delay);
};
Использование будет таким же простым, как это:
$('h1').retype();
Когда я это сделал, я столкнулся с проблемой слова, прыгающего с конца одной строки, на попрошайничество следующего, поскольку оно появилось, чтобы обойти это, я использовал бок о бок, один из которых текст был прозрачным, другие видимые и просто перемещаемые буквы один за другим от невидимого пролета до видимого. Здесь fiddle.
HTML
<div class='wrapper'>
<span class='visible'></span><span class='invisible'></span>
</div>
CSS
.visible {
color: black;
}
.invisible {
color: transparent;
}
JS
var text = "Whatever you want your text to be here",
soFar = "";
var visible = document.querySelector(".visible"),
invisible = document.querySelector(".invisible");
invisible.innerHTML = text;
var t = setInterval(function(){
soFar += text.substr(0, 1),
text = text.substr(1);
visible.innerHTML = soFar;
invisible.innerHTML = text;
if (text.length === 0) clearInterval(t);
}, 100)
Это основано на armen.shimoon's:
var showText = function (target, message, index, interval) {
if (index <= message.length && $(target).is(':visible')) {
$(target).html(message.substr(0, index++));
setTimeout(function () { showText(target, message, index, interval); }, interval);
}
}
message [index ++] не работал на моей веб-странице jquery - мне пришлось изменить его на substr. Также в моем исходном тексте используется HTML, а введенный текст использует форматирование HTML (br, b и т.д.). У меня также есть функция остановки, если цель была скрыта.
Сделайте свой код более элегантным, подготовив promises для каждой итерации, а затем выполните их как второй шаг, где вы можете ввести логику DOM.
const message = 'Solution using Promises';
const typingPromises = (message, timeout) =>
[...message].map(
(ch, i) =>
new Promise(resolve => {
setTimeout(() => {
resolve(message.substring(0, i + 1));
}, timeout * i);
})
);
typingPromises(message, 140).forEach(promise => {
promise.then(portion => {
document.querySelector('p').innerHTML = portion;
});
});<div ><p></p></div>Вам нужно обернуть каждую букву в теге span, потому что анонимные элементы html не могут быть написаны. Затем покажите один промежуток за раз. Это позволяет избежать некоторых проблем innerText/ innerHTML (нет перезагрузки DOM?), Но может быть излишним в вашем случае.
Vanillla
(function () {
var showText = function(target, msg, index, interval){
var el = document.getElementById(target);
if(index < msg.length){
el.innerHTML = el.innerHTML + msg.charAt(index);
index = index + 1;
setTimeout(function(){
showText(target,msg,index,interval);
},interval);
}
};
showText("id", "Hello, World!", 0, 50);
})();
вы можете улучшить этот код, изменив его, чтобы получить только один раз из-за того, что для изменения DOM требуется немного ресурсов.
есть хороший ответ, как это сделать здесь: это способ, которым вы можете манипулировать каждой буквой любым доступным свойством .animate(), а не хаками, такими как покрытие текста с помощью s и т.д.
Я пытался решить ту же проблему, и я придумал это решение, которое, похоже, работает.
HTML
<div id='target'></div>
JQuery
$(function() {
var message = 'Hello world';
var index = 0;
function displayLetter() {
if (index < message.length) {
$('#target').append(message[index++]);
}
else{
clearInterval(repeat);
}
}
var repeat = setInterval(displayLetter, 100);
});
Для этого есть несколько библиотек. Существуют TypeItJs и TypedJS, оба из которых позволяют html находиться в том, что вы печатаете, а также множество других методов, которые помогают в анимации эффектов пишущей машинки.
Ответ, который я наберу, - это ответ. Показать текст по буквам, но я внес в него некоторые изменения.
HTML
<h1>
<span id="msg"></span>
</h1>
Javacript
var showText = function (target, message, index, interval) {
if (index < message.length) {
//$(target).append(message[index++]);
$(target).text($(target).text() + message[index++]);
setTimeout(function () { showText(target, message, index, interval); }, interval);
}
}
$(function () {
showText("#msg", "Hello, World!", 0, 80);
//showText("#msg", "Hello, World!", 0, 500);
});
CSS
#msg {
color: #6d67c6;
font-family: sans-serif;
font-size: 30px;
font-weight: bold;
}
Ванильная версия JavaScript @armen.shimoon:
document.addEventListener('DOMContentLoaded', function() {
showText("#msg", "Hello, World!", 0, 100);
});
let showText = function (target, message, index, interval) {
if (index < message.length) {
document.querySelector(target).innerHTML =
document.querySelector(target).innerHTML + message[index++];
setTimeout(function () { showText(target, message, index, interval); }, interval);
}
}<div id="msg"></div>
<span id="text_target"></span>