The most versatile animated typing utility on the planet.|
new TypeIt("#hero", {
speed: 50,
startDelay: 900
})
.type("the mot versti", {delay: 100})
.move(-8, {speed: 25, delay: 100})
.type('s')
.move('START')
.move(1, {delay: 200})
.delete(1)
.type('T')
.move(12, {delay: 200})
.type('a', {delay: 250})
.move('END')
.type('le animated typing utlity')
.move(-4)
.type('i')
.move('END')
.type(' on the internet', {delay: 400})
.delete(8, {delay: 600})
.type('<em><strong>planet.</strong></em>');
.go();
사례
new TypeIt('#typeTxt',{
speed: 50,
deleteSpeed: 0,
loop: true
})
.type('하늘 위에 떠있는<br>별을 클릭해보세요.<br>하나하나의 소중한 사연이<br>담겨 있습니다.', {delay: 500})
.delete()
.type('하늘 위에 떠있는<br>별을 클릭해보세요.<br>하나하나의 소중한 사연이<br>담겨 있습니다.', {delay: 500})
.go();
사용법
<html>
<head></head>
<body>
<!-- A root element for TypeIt to target. -->
<span id="myElement"></span>
<!-- The script itself, loaded AFTER your root element. -->
<script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>
<script>
new TypeIt('#myElement', {
strings: "This is what will be typed!"
}).go();
</script>
</body>
</html>