打字效果动画的4种实现方法(超简单)
方法一(纯css实现):
html代码:
打字动画打字动画打字动画
css样式:
.typing{
font-size:1rem;
padding-top:6%;
margin-bottom:5%;
font-weight:normal;
letter-spacing:.3rem;
-webkit-animation:type2ssteps(50,end)forwards;
animation:type2ssteps(50,end)forwards;
}
.typing-item{
text-align:center;
color:black;
width:100%;
white-space:nowrap;
overflow:hidden;
}
@-webkit-keyframestype{
from{width:0;}
}
@keyframestype{
from{width:0;}
}
缺点:只能实现一行式的打字效果,无法打出一段落文字
方法二(jquery):
html代码:
|
jquery代码:
方法三(jquery-typed插件):
html代码:
引入Typed.js,Typed.js内容如下
//TheMITLicense(MIT)
//Typed.js|Copyright(c)2014MattBoldt|www.mattboldt.com
//Permissionisherebygranted,freeofcharge,toanypersonobtainingacopy
//ofthissoftwareandassociateddocumentationfiles(the"Software"),todeal
//intheSoftwarewithoutrestriction,includingwithoutlimitationtherights
//touse,copy,modify,merge,publish,distribute,sublicense,and/orsell
//copiesoftheSoftware,andtopermitpersonstowhomtheSoftwareis
//furnishedtodoso,subjecttothefollowingconditions:
//Theabovecopyrightnoticeandthispermissionnoticeshallbeincludedin
//allcopiesorsubstantialportionsoftheSoftware.
//THESOFTWAREISPROVIDED"ASIS",WITHOUTWARRANTYOFANYKIND,EXPRESSOR
//IMPLIED,INCLUDINGBUTNOTLIMITEDTOTHEWARRANTIESOFMERCHANTABILITY,
//FITNESSFORAPARTICULARPURPOSEANDNONINFRINGEMENT.INNOEVENTSHALLTHE
//AUTHORSORCOPYRIGHTHOLDERSBELIABLEFORANYCLAIM,DAMAGESOROTHER
//LIABILITY,WHETHERINANACTIONOFCONTRACT,TORTOROTHERWISE,ARISINGFROM,
//OUTOFORINCONNECTIONWITHTHESOFTWAREORTHEUSEOROTHERDEALINGSIN
//THESOFTWARE.
!function($){
"usestrict";
varTyped=function(el,options){
//chosenelementtomanipulatetext
this.el=$(el);
//options
this.options=$.extend({},$.fn.typed.defaults,options);
//attributetotypeinto
this.isInput=this.el.is('input');
this.attr=this.options.attr;
//showcursor
this.showCursor=this.isInput?false:this.options.showCursor;
//textcontentofelement
this.elContent=this.attr?this.el.attr(this.attr):this.el.text()
//htmlorplaintext
this.contentType=this.options.contentType;
//typingspeed
this.typeSpeed=this.options.typeSpeed;
//addadelaybeforetypingstarts
this.startDelay=this.options.startDelay;
//backspacingspeed
this.backSpeed=this.options.backSpeed;
//amountoftimetowaitbeforebackspacing
this.backDelay=this.options.backDelay;
//inputstringsoftext
this.strings=this.options.strings;
//characternumberpositionofcurrentstring
this.strPos=0;
//currentarrayposition
this.arrayPos=0;
//numbertostopbackspacingon.
//default0,canchangedependingonhowmanychars
//youwanttoremoveatthetime
this.stopNum=0;
//Loopinglogic
this.loop=this.options.loop;
this.loopCount=this.options.loopCount;
this.curLoop=0;
//forstopping
this.stop=false;
//customcursor
this.cursorChar=this.options.cursorChar;
//shufflethestrings
this.shuffle=this.options.shuffle;
//theorderofstrings
this.sequence=[];
//Allsystemsgo!
this.build();
};
Typed.prototype={
constructor:Typed
,
init:function(){
//begintheloopw/firstcurrentstring(globalself.string)
//currentstringwillbepassedasanargumenteachtimeafterthis
varself=this;
self.timeout=setTimeout(function(){
for(vari=0;i"+this.cursorChar+"");
this.el.after(this.cursor);
}
this.init();
}
//passcurrentstringstatetoeachfunction,types1charpercall
,
typewrite:function(curString,curStrPos){
//exitwhenstopped
if(this.stop===true){
return;
}
//varyingvaluesforsetTimeoutduringtyping
//can'tbeglobalsincenumberchangeseachtimeloopisexecuted
varhumanize=Math.round(Math.random()*(100-30))+this.typeSpeed;
varself=this;
//-------------optional-------------//
//backpacesacertainstringfaster
//------------------------------------//
//if(self.arrayPos==1){
//self.backDelay=50;
//}
//else{self.backDelay=500;}
//containtypingfunctioninatimeouthumanize'ddelay
self.timeout=setTimeout(function(){
//checkforanescapecharacterbeforeapausevalue
//format:\^\d+..eg:^1000..shouldbeabletoprintthe^toousing^^
//single^areremovedfromstring
varcharPause=0;
varsubstr=curString.substr(curStrPos);
if(substr.charAt(0)==='^'){
varskip=1;//skipatleast1
if(/^\^\d+/.test(substr)){
substr=/\d+/.exec(substr)[0];
skip+=substr.length;
charPause=parseInt(substr);
}
//stripouttheescapecharacterandpausevaluesothey'renotprinted
curString=curString.substring(0,curStrPos)+curString.substring(curStrPos+skip);
}
if(self.contentType==='html'){
//skipoverhtmltagswhiletyping
varcurChar=curString.substr(curStrPos).charAt(0)
if(curChar==='<'||curChar==='&'){
vartag='';
varendTag='';
if(curChar==='<'){
endTag='>'
}else{
endTag=';'
}
while(curString.substr(curStrPos).charAt(0)!==endTag){
tag+=curString.substr(curStrPos).charAt(0);
curStrPos++;
}
curStrPos++;
tag+=endTag;
}
}
//timeoutforanypauseafteracharacter
self.timeout=setTimeout(function(){
if(curStrPos===curString.length){
//firescallbackfunction
self.options.onStringTyped(self.arrayPos);
//isthisthefinalstring
if(self.arrayPos===self.strings.length-1){
//animationthatoccursonthelasttypedstring
self.options.callback();
self.curLoop++;
//quitifwewontloopback
if(self.loop===false||self.curLoop===self.loopCount)
return;
}
self.timeout=setTimeout(function(){
self.backspace(curString,curStrPos);
},self.backDelay);
}else{
/*callbeforefunctionsifapplicable*/
if(curStrPos===0)
self.options.preStringTyped(self.arrayPos);
//starttypingeachnewcharintoexistingstring
//curString:arg,self.el.html:originaltextinsideelement
varnextString=curString.substr(0,curStrPos+1);
if(self.attr){
self.el.attr(self.attr,nextString);
}else{
if(self.isInput){
self.el.val(nextString);
}elseif(self.contentType==='html'){
self.el.html(nextString);
}else{
self.el.text(nextString);
}
}
//addcharactersonebyone
curStrPos++;
//loopthefunction
self.typewrite(curString,curStrPos);
}
//endofcharacterpause
},charPause);
//humanizedvaluefortyping
},humanize);
}
,
backspace:function(curString,curStrPos){
//exitwhenstopped
if(this.stop===true){
return;
}
//varyingvaluesforsetTimeoutduringtyping
//can'tbeglobalsincenumberchangeseachtimeloopisexecuted
varhumanize=Math.round(Math.random()*(100-30))+this.backSpeed;
varself=this;
self.timeout=setTimeout(function(){
//-----thispartisoptional-----//
//checkstringarrayposition
//onthefirststring,onlydeleteoneword
//thestopNumactuallyrepresentstheamountofcharsto
//keepinthecurrentstring.Inmycaseit's14.
//if(self.arrayPos==1){
//self.stopNum=14;
//}
//everyothertime,deletethewholetypedstring
//else{
//self.stopNum=0;
//}
if(self.contentType==='html'){
//skipoverhtmltagswhilebackspacing
if(curString.substr(curStrPos).charAt(0)==='>'){
vartag='';
while(curString.substr(curStrPos).charAt(0)!=='<'){
tag-=curString.substr(curStrPos).charAt(0);
curStrPos--;
}
curStrPos--;
tag+='<';
}
}
//-----continueimportantstuff-----//
//replacetextwithbasetext+typedcharacters
varnextString=curString.substr(0,curStrPos);
if(self.attr){
self.el.attr(self.attr,nextString);
}else{
if(self.isInput){
self.el.val(nextString);
}elseif(self.contentType==='html'){
self.el.html(nextString);
}else{
self.el.text(nextString);
}
}
//ifthenumber(idofcharacterincurrentstring)is
//lessthanthestopnumber,keepgoing
if(curStrPos>self.stopNum){
//subtractcharactersonebyone
curStrPos--;
//loopthefunction
self.backspace(curString,curStrPos);
}
//ifthestopnumberhasbeenreached,increase
//arraypositiontonextstring
elseif(curStrPos<=self.stopNum){
self.arrayPos++;
if(self.arrayPos===self.strings.length){
self.arrayPos=0;
//Shufflesequenceagain
if(self.shuffle)self.sequence=self.shuffleArray(self.sequence);
self.init();
}else
self.typewrite(self.strings[self.sequence[self.arrayPos]],curStrPos);
}
//humanizedvaluefortyping
},humanize);
}
/**
*Shufflesthenumbersinthegivenarray.
*@param{Array}array
*@returns{Array}
*/
,shuffleArray:function(array){
vartmp,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;
}
returnarray;
}
//Start&Stopcurrentlynotworking
//,stop:function(){
//varself=this;
//self.stop=true;
//clearInterval(self.timeout);
//}
//,start:function(){
//varself=this;
//if(self.stop===false)
//return;
//this.stop=false;
//this.init();
//}
//Resetandrebuildtheelement
,
reset:function(){
varself=this;
clearInterval(self.timeout);
varid=this.el.attr('id');
this.el.after('')
this.el.remove();
if(typeofthis.cursor!=='undefined'){
this.cursor.remove();
}
//Sendthecallback
self.options.resetCallback();
}
};
$.fn.typed=function(option){
returnthis.each(function(){
var$this=$(this),
data=$this.data('typed'),
options=typeofoption=='object'&&option;
if(!data)$this.data('typed',(data=newTyped(this,options)));
if(typeofoption=='string')data[option]();
});
};
$.fn.typed.defaults={
strings:["Thesearethedefaultvalues...","Youknowwhatyoushoulddo?","Useyourown!","Haveagreatday!"],
//typingspeed
typeSpeed:0,
//timebeforetypingstarts
startDelay:0,
//backspacingspeed
backSpeed:0,
//shufflethestrings
shuffle:false,
//timebeforebackspacing
backDelay:500,
//loop
loop:false,
//false=infinite
loopCount:false,
//showcursor
showCursor:true,
//characterforcursor
cursorChar:"|",
//attributetotype(null==text)
attr:null,
//eitherhtmlortext
contentType:'html',
//callwhendonecallbackfunction
callback:function(){},
//startingcallbackfunctionbeforeeachstring
preStringTyped:function(){},
//callbackforeverytypedstring
onStringTyped:function(){},
//callbackforreset
resetCallback:function(){}
};
}(window.jQuery);
调用Typed.js
varstring=$('#content').val();
$('#content-item').typed({
strings:[""+string],
typeSpeed:50,
backDelay:800,
loop:false,
loopCount:false
});
方法四(纯js):
html代码:
最后,发现实现打字效果还是蛮简单的对吧,css的思路是利用width和overflow:hidden,动画让宽度变宽实现像打字的样式,但是样式有限,不能实现多行显示。js/jquery,普遍都是先得到字的内容,然后再逐字往容器中添加文字。问题不难,主要是要善于思考!!