Afficher le texte lettre par lettre
Quelle est la façon la plus élégante de montrer html texte lettre par lettre (comme le jeu vidéo sous-titres) à l'aide de CSS et de JavaScript?
Même si je suis sûr que sa peut être résolu en utilisant une force brute approche (disons, le fractionnement des personnages et de les imprimer un par un à l'aide de jQuery.append()
), j'espère qu'il y a un peu de CSS3 (pseudo-éléments?) ou JQuery magie pour le faire de manière plus élégante.
Des points supplémentaires si la solution de l'estime intérieure du contenu HTML.
- Est-il nécessaire de lettres individuelles popping? Ou peut-il être un bon révéler?
- Si le bon de révéler montre les lettres de façon séquentielle, oui.
Vous devez vous connecter pour publier un commentaire.
HTML
Javascript
Appel avec:
setTimeout(showText, interval, target, message, index, interval);
Si lisse révéler, est raisonnable, alors je pense que cela devrait être assez simple. Pas testé, mais c'est la façon dont j'imagine qu'il en serait de travailler
html
css
jQuery
Bon, je ne pouvais pas résister et faites un violon. Un peu de code d'erreur que j'ai corrigé. Semble bon pour moi si!
http://jsfiddle.net/mrtsherman/6qQrN/1/
100% vanille javascript, le mode strict, discrète html,
Vous devriez vraiment juste
append
, ou afficher/masquer.Toutefois, si pour une raison étrange, vous ne souhaitez pas modifier votre texte, vous pouvez utiliser ce trop-compliqué-pour-pas-bonne-raison morceau de code:
HTML:
CSS:
jQuery:
Et enfin, voici le violon: http://jsfiddle.net/dDGVH/236/
Mais, sérieusement, ne pas l'utiliser...
.cover
travées. Cela devient de plus en plus compliqué de minute en minute. Êtes-vous sûr que vous ne voulez pas de simplement ajouter?Quand j'ai fait ce que j'ai rencontré le problème d'un mot de saut à partir de la fin d'une ligne au début de la suivante, comme il l'lettres est apparu pour contourner cela, j'ai utilisé de côté par côté les travées, dont le texte a été transparent, l'autre visible et simplement déplacé les lettres une par une à partir de l'invisible travée du visible. Voici un violon.
HTML
CSS
JS
J'ai fait un petit plugin jquery pour que. Vous devez d'abord assurez-vous que le texte sera visible que si javascript est désactivé, et si non, réafficher le texte lettre par lettre.
Utilisation sera tout aussi facile que cela:
Ceci est basé sur armen.shimoon de l':
message[index++] ne fonctionnait pas dans ma page web jquery - j'ai dû changer de substr. Aussi mon texte original utilise le HTML et le texte tapé utilise la mise en forme HTML (br, b, etc). J'ai aussi la fonction d'arrêt si la cible a été caché.
De rendre votre code plus élégant par la préparation de promesses pour chaque itération, puis les exécuter comme deuxième étape, où vous pouvez injecter DOM logique.
JS:
HTML:
Vanille JavaScript version de @armen.shimoon réponse:
JS:
HTML:
Vous avez besoin d'envelopper chaque lettre dans la balise span, car anonyme éléments html ne peut pas être de style. Alors révéler une travée à l'heure. Cela évite certains innerText /innerHTML questions (pas de DOM de redistribution?) mais peut-être exagéré dans votre cas.
Vanillla
pourriez-vous améliorer ce code en le modifiant de sorte que vous obtenez seulement la el un moment, en raison du fait qu'il faut un peu de ressources pour modifier le DOM.
il y a une bonne réponse à comment le faire ici:
c'est une façon que vous pouvez manipuler chaque lettre avec tout .animate() de la propriété disponible, pas avec des hacks comme couvrant le texte avec s etc.
J'ai essayé de résoudre le même problème et j'ai trouvé cette solution qui semble fonctionner.
HTML
jQuery
Il y a quelques bibliothèques pour cela. Il y a TypeItJs et TypedJS les deux autoriser le html soit dans la chose qui vous frappe, ainsi que de nombreux autres méthodes pour aider à l'animation d'une machine à écrire effets.
La réponse je vais le type est la réponse Afficher le texte lettre par lettre , mais j'ai fait quelques modifications
HTML
Javacript
CSS