打字效果動畫的4種實現(xiàn)方法(超簡單)

<h1 class="typing typing-item">打字動畫打字動畫打字動畫</h1>

.typing{
 font-size: 1rem;
 padding-top: 6%;
 margin-bottom: 5%;
 font-weight: normal;
 letter-spacing: .3rem;
 -webkit-animation: type 2s steps(50, end) forwards;
 animation: type 2s steps(50, end) forwards;
}
.typing-item{
 text-align: center;
 color: black;
 width:100%;
 white-space:nowrap;
 overflow:hidden;
}
@-webkit-keyframes type{
 from { width: 0;}
}

@keyframes type{
 from { width: 0;}
}

<div class="text-container">
 <span class="text-static"></span>
 <span class="text"></span>
 <span class="cursor">|</span>
</div>

<script type="text/javascript" src="../js/jquery.js"></script>
<script>
 $(function() {
 myPrint(["hello my word!"], 100);

 function myPrint(arr, speed) {
 var index = 0;
 var str = arr[index];
 var i = 0;
 var add = true;
 var mySetInterval = setInterval(function() {
 // 延時4個字符的時間
 if (i == str.length + 4) {
 add = false;
 // 如果是最后一個字符串則終止循環(huán)函數(shù)
 if (index + 1 >= arr.length) {
 clearInterval(mySetInterval);
 }
 } else if (i == -2) {
 // 刪除后延時2個字符的時間
 add = true;
 str = arr[++index];
 }
 setTimeout(function() {
 if (add) {
 i++;
 $(".text").html(str.substring(0, i));
 } else {
 $(".text").html(str.substring(0, i - 1));
 i--;
 }
 })

 }, speed)
 }

 })
 </script>

<div class="content">
 <div class="content-div">
 <span id="content-item"></span>
 </div>
</div>
<input type="hidden" id="content" value="內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容" />

// The MIT License (MIT)

// Typed.js | Copyright (c) 2014 Matt Boldt | www.mattboldt.com

// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:

// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.




! function($) {

 "use strict";

 var Typed = function(el, options) {

 // chosen element to manipulate text
 this.el = $(el);

 // options
 this.options = $.extend({}, $.fn.typed.defaults, options);

 // attribute to type into
 this.isInput = this.el.is('input');
 this.attr = this.options.attr;

 // show cursor
 this.showCursor = this.isInput ? false : this.options.showCursor;

 // text content of element
 this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text()

 // html or plain text
 this.contentType = this.options.contentType;

 // typing speed
 this.typeSpeed = this.options.typeSpeed;

 // add a delay before typing starts
 this.startDelay = this.options.startDelay;

 // backspacing speed
 this.backSpeed = this.options.backSpeed;

 // amount of time to wait before backspacing
 this.backDelay = this.options.backDelay;

 // input strings of text
 this.strings = this.options.strings;

 // character number position of current string
 this.strPos = 0;

 // current array position
 this.arrayPos = 0;

 // number to stop backspacing on.
 // default 0, can change depending on how many chars
 // you want to remove at the time
 this.stopNum = 0;

 // Looping logic
 this.loop = this.options.loop;
 this.loopCount = this.options.loopCount;
 this.curLoop = 0;

 // for stopping
 this.stop = false;

 // custom cursor
 this.cursorChar = this.options.cursorChar;

 // shuffle the strings
 this.shuffle = this.options.shuffle;
 // the order of strings
 this.sequence = [];

 // All systems go!
 this.build();
 };

 Typed.prototype = {

 constructor: Typed

 ,
 init: function() {
 // begin the loop w/ first current string (global self.string)
 // current string will be passed as an argument each time after this
 var self = this;
 self.timeout = setTimeout(function() {
 for (var i=0;i<self.strings.length;++i) self.sequence[i]=i;

 // shuffle the array if true
 if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);

 // Start typing
 self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);
 }, self.startDelay);
 }

 ,
 build: function() {
 // Insert cursor
 if (this.showCursor === true) {
 this.cursor = $("<span class=\"typed-cursor\">" + this.cursorChar + "</span>");
 this.el.after(this.cursor);
 }
 this.init();
 }

 // pass current string state to each function, types 1 char per call
 ,
 typewrite: function(curString, curStrPos) {
 // exit when stopped
 if (this.stop === true) {
 return;
 }

 // varying values for setTimeout during typing
 // can't be global since number changes each time loop is executed
 var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
 var self = this;

 // ------------- optional ------------- //
 // backpaces a certain string faster
 // ------------------------------------ //
 // if (self.arrayPos == 1){
 // self.backDelay = 50;
 // }
 // else{ self.backDelay = 500; }

 // contain typing function in a timeout humanize'd delay
 self.timeout = setTimeout(function() {
 // check for an escape character before a pause value
 // format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^
 // single ^ are removed from string
 var charPause = 0;
 var substr = curString.substr(curStrPos);
 if (substr.charAt(0) === '^') {
 var skip = 1; // skip atleast 1
 if (/^\^\d+/.test(substr)) {
 substr = /\d+/.exec(substr)[0];
 skip += substr.length;
 charPause = parseInt(substr);
 }

 // strip out the escape character and pause value so they're not printed
 curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip);
 }

 if (self.contentType === 'html') {
 // skip over html tags while typing
 var curChar = curString.substr(curStrPos).charAt(0)
 if (curChar === '<' || curChar === '&') {
 var tag = '';
 var endTag = '';
 if (curChar === '<') {
 endTag = '>'
 } else {
 endTag = ';'
 }
 while (curString.substr(curStrPos).charAt(0) !== endTag) {
 tag += curString.substr(curStrPos).charAt(0);
 curStrPos++;
 }
 curStrPos++;
 tag += endTag;
 }
 }

 // timeout for any pause after a character
 self.timeout = setTimeout(function() {
 if (curStrPos === curString.length) {
 // fires callback function
 self.options.onStringTyped(self.arrayPos);

 // is this the final string
 if (self.arrayPos === self.strings.length - 1) {
 // animation that occurs on the last typed string
 self.options.callback();

 self.curLoop++;

 // quit if we wont loop back
 if (self.loop === false || self.curLoop === self.loopCount)
 return;
 }

 self.timeout = setTimeout(function() {
 self.backspace(curString, curStrPos);
 }, self.backDelay);
 } else {

 /* call before functions if applicable */
 if (curStrPos === 0)
 self.options.preStringTyped(self.arrayPos);

 // start typing each new char into existing string
 // curString: arg, self.el.html: original text inside element
 var nextString = curString.substr(0, curStrPos + 1);
 if (self.attr) {
 self.el.attr(self.attr, nextString);
 } else {
 if (self.isInput) {
 self.el.val(nextString);
 } else if (self.contentType === 'html') {
 self.el.html(nextString);
 } else {
 self.el.text(nextString);
 }
 }

 // add characters one by one
 curStrPos++;
 // loop the function
 self.typewrite(curString, curStrPos);
 }
 // end of character pause
 }, charPause);

 // humanized value for typing
 }, humanize);

 }

 ,
 backspace: function(curString, curStrPos) {
 // exit when stopped
 if (this.stop === true) {
 return;
 }

 // varying values for setTimeout during typing
 // can't be global since number changes each time loop is executed
 var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed;
 var self = this;

 self.timeout = setTimeout(function() {

 // ----- this part is optional ----- //
 // check string array position
 // on the first string, only delete one word
 // the stopNum actually represents the amount of chars to
 // keep in the current string. In my case it's 14.
 // if (self.arrayPos == 1){
 // self.stopNum = 14;
 // }
 //every other time, delete the whole typed string
 // else{
 // self.stopNum = 0;
 // }

 if (self.contentType === 'html') {
 // skip over html tags while backspacing
 if (curString.substr(curStrPos).charAt(0) === '>') {
 var tag = '';
 while (curString.substr(curStrPos).charAt(0) !== '<') {
 tag -= curString.substr(curStrPos).charAt(0);
 curStrPos--;
 }
 curStrPos--;
 tag += '<';
 }
 }

 // ----- continue important stuff ----- //
 // replace text with base text + typed characters
 var nextString = curString.substr(0, curStrPos);
 if (self.attr) {
 self.el.attr(self.attr, nextString);
 } else {
 if (self.isInput) {
 self.el.val(nextString);
 } else if (self.contentType === 'html') {
 self.el.html(nextString);
 } else {
 self.el.text(nextString);
 }
 }

 // if the number (id of character in current string) is
 // less than the stop number, keep going
 if (curStrPos > self.stopNum) {
 // subtract characters one by one
 curStrPos--;
 // loop the function
 self.backspace(curString, curStrPos);
 }
 // if the stop number has been reached, increase
 // array position to next string
 else if (curStrPos <= self.stopNum) {
 self.arrayPos++;

 if (self.arrayPos === self.strings.length) {
 self.arrayPos = 0;

 // Shuffle sequence again
 if(self.shuffle) self.sequence = self.shuffleArray(self.sequence);

 self.init();
 } else
 self.typewrite(self.strings[self.sequence[self.arrayPos]], curStrPos);
 }

 // humanized value for typing
 }, humanize);

 }
 /**
 * Shuffles the numbers in the given array.
 * @param {Array} array
 * @returns {Array}
 */
 ,shuffleArray: function(array) {
 var tmp, current, top = array.length;
 if(top) while(--top) {
 current = Math.floor(Math.random() * (top + 1));
 tmp = array[current];
 array[current] = array[top];
 array[top] = tmp;
 }
 return array;
 }

 // Start & Stop currently not working

 // , stop: function() {
 // var self = this;

 // self.stop = true;
 // clearInterval(self.timeout);
 // }

 // , start: function() {
 // var self = this;
 // if(self.stop === false)
 // return;

 // this.stop = false;
 // this.init();
 // }

 // Reset and rebuild the element
 ,
 reset: function() {
 var self = this;
 clearInterval(self.timeout);
 var id = this.el.attr('id');
 this.el.after('<span id="' + id + '"/>')
 this.el.remove();
 if (typeof this.cursor !== 'undefined') {
 this.cursor.remove();
 }
 // Send the callback
 self.options.resetCallback();
 }

 };

 $.fn.typed = function(option) {
 return this.each(function() {
 var $this = $(this),
 data = $this.data('typed'),
 options = typeof option == 'object' && option;
 if (!data) $this.data('typed', (data = new Typed(this, options)));
 if (typeof option == 'string') data[option]();
 });
 };

 $.fn.typed.defaults = {
 strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
 // typing speed
 typeSpeed: 0,
 // time before typing starts
 startDelay: 0,
 // backspacing speed
 backSpeed: 0,
 // shuffle the strings
 shuffle: false,
 // time before backspacing
 backDelay: 500,
 // loop
 loop: false,
 // false = infinite
 loopCount: false,
 // show cursor
 showCursor: true,
 // character for cursor
 cursorChar: "|",
 // attribute to type (null == text)
 attr: null,
 // either html or text
 contentType: 'html',
 // call when done callback function
 callback: function() {},
 // starting callback function before each string
 preStringTyped: function() {},
 //callback for every typed string
 onStringTyped: function() {},
 // callback for reset
 resetCallback: function() {}
 };


}(window.jQuery);

var string = $('#content').val();
$('#content-item').typed({
 strings: ["　　" + string],
 typeSpeed: 50,
 backDelay: 800,
 loop: false,
 loopCount: false
});

<script>
 var str = '內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容';
 var i = 0;
 function typing(){
 var divTyping = document.getElementById('typing');
 if (i <= str.length) {
 divTyping.innerHTML = str.slice(0, i++) + '_';
 setTimeout('typing()', 200);
 }
 else{
 divTyping.innerHTML = str;
 }
 }
 typing();
</script>