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

2023-09-23 01:54:06 64

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

//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);

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

热门推荐

随机推荐