I would like to animate small text, I want to display the letters one by one?
Is there any way to do it using CSS3?
Just wrap your letters in a single tag, for example span
and animate them. W3C specification has only first-letter
pseudo class.
Or check this keyframes animation
@-webkit-keyframes typing {
from { width: 0 }
to { width:16.3em }
}
@-moz-keyframes typing {
from { width: 0 }
to { width:16.3em }
}
@-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
@-moz-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
body { font-family: Consolas, monospace; }
h1 {
font-size:150%;
width:16.3em;
white-space:nowrap;
overflow:hidden;
border-right: .1em solid black;
-webkit-animation: typing 17s steps(30, end), /* # of steps = # of characters */
blink-caret 1s step-end infinite;
-moz-animation: typing 17s steps(30, end), /* # of steps = # of characters */
blink-caret 1s step-end infinite;
}
http://letteringjs.com/ is a plugin for jQuery which wraps every letter in a span tag to animate but keeps the html clean in the source. A good solution if you're already using jQuery, unfortunately there is no pure CSS solution as yet.
I use textillate.js which depends on animate.css. It's super easy to get started with those two. From their docs:
<h1 class="tlt">My Title</h1>
And your JavaScript should look like this:
$(function () {
$('.tlt').textillate();
})
https://github.com/jschr/textillate https://github.com/daneden/animate.css
If you only need to display something letter by letter, you don't need jQuery or Textillate or any other plug-in. Just copy this.
<script type="text/javascript">
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);
}
window.onload = function(){
printLetterByLetter("someElement", "Hello world, bonjour le monde.", 100);
}
</script>
Replace 'someElement' by the id of the html element where the text is displayed. Replace '100' by any other number. Here it means a new letter appears every 100 milliseconds.
try this
http://www.hungry-media.com/code/jQuery/tickerType/
Css3 cannot do it on its own, you will need some script to slice characters one by one
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.