打字效果动画的4种实现方法(超简单)

打字效果动画的4种实现方法(超简单)

方法一(纯css实现)：

html代码：

css样式：

.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;}

}

缺点：只能实现一行式的打字效果，无法打出一段落文字

方法二（jquery）:

html代码：

|

jquery代码：

方法三（jquery-typed插件）:

html代码：

引入Typed.js，Typed.js内容如下

// The MIT License (MIT)

// Typed.js | Copyright (c) 2014 Matt Boldt | 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.shhttp://uffle = 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

// 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 = $("" + this.cursorChar + "");

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('')

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 == 'GRSYcxythFobject' && 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);

调用Typed.js

var string = $('#content').val();

$('#content-item').typed({

strings: ["　　" + string],

typeSpeed: 50,

backDelay: 800,

loop: false,

loopCount: false

});

方法四（纯js）：

html代码：

// 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 = $("" + this.cursorChar + "");

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('')

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 == 'GRSYcxythFobject' && 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);

调用Typed.js

var string = $('#content').val();

$('#content-item').typed({

strings: ["　　" + string],

typeSpeed: 50,

backDelay: 800,

loop: false,

loopCount: false

});

方法四（纯js）：

html代码：

js代码：

最后，发现实现打字效果还是蛮简单的对吧，css的思路是利用width和overflow:hidden，动画让宽度变宽实现像打字的样式，但是样式有限，不能实现多行显示。js/jquery，普遍都是先得到字的内容，然后再逐字往容器中添加文字。问题不难，主要是要善于思考！！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。