use this simple script to get typewriter effect for your texts
Forked from Dmitri Voronianski's Pen typeWriter.js.
Forked from Dmitri Voronianski's Pen typeWriter.js.
Created
March 26, 2015 13:20
-
-
Save mywarr/dfa8f7ddd9e22717da06 to your computer and use it in GitHub Desktop.
typeWriter.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="wrap"> | |
| <a href="#" class="start">Click to print</a> | |
| <div class="test" data-text="帝旺 則取 2014/1/12 為目標日期，並取 前4天2014/1/8開始 到後4天 2014/1/16 結束 共取9 天"></div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * http://pixelhunter.me/ | |
| * | |
| * text {String} - printing text | |
| * n {Number} - from what letter to start | |
| */ | |
| function typeWriter(text, n) { | |
| if (n < (text.length)) { | |
| $('.test').html(text.substring(0, n+1)+"|"); | |
| n++; | |
| setTimeout(function() { | |
| typeWriter(text, n) | |
| }, 100); | |
| } | |
| } | |
| $('.start').click(function(e) { | |
| e.stopPropagation(); | |
| var text = $('.test').data('text'); | |
| typeWriter(text, 0); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(http://fonts.googleapis.com/css?family=Cutive+Mono); | |
| body { | |
| font: 16px/20px 'Cutive Mono', serif; | |
| } | |
| a { | |
| color: #222; | |
| } | |
| .wrap { | |
| width: 500px; | |
| margin: 30px auto; | |
| text-align: center; | |
| } | |
| .test { | |
| margin-top: 10px; | |
| text-align: left; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment