吊炸天的进度效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Text Vortex</title> <style type="text/css"> body { font-family: helvetica; } .world { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; } .world > .particle { position: absolute; left: 50%; top: 50%; width: 0px; height: 0px; color: #ff4742; -webkit-backface-visibility: hidden; text-rendering: auto; } .progress { color: #1aa6d3; position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin-left: -75px; margin-top: -75px; font-size: 24px; line-height: 150px; text-align: center; } </style> </head> <body> <div class="world"></div> <div class="progress"><span class="count">0</span></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.5/TweenMax.min.js'></script> <script type="text/javascript"> function ProgressCircle ($config) { this.canvas = document.createElement('canvas'), this.context = this.canvas.getContext('2d'); this.radius = $config.radius; this.hole = $config.hole; this.color = $config.color; this.canvas.width = $config.width * devicePixelRatio; this.canvas.height = $config.width * devicePixelRatio; this.canvas.style.webkitTransform = 'scale(' + (1/devicePixelRatio) + ')'; this.canvas.style.webkitTransformOrigin = '0 0'; } ProgressCircle.prototype.update = function (percent) { var x = this.canvas.width/2, y = this.canvas.height/2, r = this.canvas.width/2 * this.radius, hole = this.hole; this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); this.context.fillStyle = this.color; this.context.beginPath(); this.context.moveTo(x, y); this.context.arc(x, y, r, 0, Math.PI * 2 * percent, false); this.context.fill(); this.context.globalCompositeOperation = 'destination-out'; this.context.beginPath(); this.context.arc(x, y, r * hole, 0, Math.PI * 2, false); this.context.fill(); this.context.globalCompositeOperation = 'source-over'; }; var progress = new ProgressCircle({ width: 150, height: 150, radius: .8, hole: .9, color: '#1aa6d3' }); progress.canvas.style.position = 'absolute'; progress.canvas.style.top = '0'; progress.canvas.style.left = '0'; document.querySelector('.progress').appendChild(progress.canvas); var timeline = new TimelineMax({}); var world = document.querySelector('.world'); function ParticlePool ($config) { this._container = $config.container; this._items = []; this.length = 0; }; ParticlePool.prototype = { push: function (item) { this._items.push(item); this.length++; }, pop: function () { if (this._items.length) { this.length--; return this._items.pop(); } else { return this.create(); } }, create: function () { var particle = document.createElement('div'); particle.className = 'particle'; particle.style.cssText = 'display: none'; this._container.appendChild(particle); return particle; } }; var pool = new ParticlePool({container: world}) function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function placeParticle (word, callback) { var particle = pool.pop(), x, y, scale = 1 + Math.random() * 3, boxSize = 200, delay = Math.random() * 2; var side = getRandomInt(0, 3); if (side === 0) { // left x = -window.innerWidth/2 - boxSize; y = getRandomInt(-window.innerHeight/2 - 1, window.innerHeight/2 - 1); } else if (side === 1) { // top x = getRandomInt(-window.innerWidth/2 - 1, window.innerWidth/2 - 1); y = -window.innerHeight/2 - boxSize; } else if (side === 2) { // right x = window.innerWidth/2 + boxSize; y = getRandomInt(-window.innerHeight/2 - 1, window.innerHeight/2 - 1); } else if (side === 3) { // bottom x = getRandomInt(-window.innerWidth/2 - 1, window.innerWidth/2 - 1); y = window.innerHeight/2 + boxSize; } particle.innerHTML = word; timeline.fromTo(particle, 1/2, {y: y, x: x, display: 'block', opacity: 1}, {y: 0, x: 0, onComplete : function () { TweenLite.set(particle, {clearProps: 'all', display: 'none'}); pool.push(particle); callback(); }}, timeline.time() + delay); timeline.fromTo(particle, 1/2, {scale: scale}, {scale: 0, ease: Quad.easeOut}, timeline.time() + delay); timeline.fromTo(particle, .5/2, {opacity: 1}, {opacity: 0, ease: Quad.easeOut}, timeline.time() + (.5/2) + delay); } var words = ['abandon','abduct','ably','abolish','abscond','abuse','accelerate','accomplish','accuse','accrue','achieve','achieve','acquire','act','activate','actively','adapt','add','address','adeptly','adjust','administer','advance','advantageously','advise','advocate','affirm','aggressively','aid','aim','alert','allocate','ambitiously','analyze','answer','anticipate','apprehend','approach','appropriate','appropriately','arbitrate','arrange','arrest','artfully','ascertain','assault','assemble','assess','assign','assist','assure','attack','attain','attract','audit','augment','authenticate','author','authoritatively','authorize','automate','avert','avidly','avoid','award','balance','bang','bank','bar','beat','beneficially','berate','bill','bite','blast','blend','block','blow','bolster','book','boost','brace','brief','brighten','broke','buck','budget','built','bump','bury','bushwhack','calculate','call','calm','campaign','cancel','capably','capitalize','catch','centralize','certify','chair','challenge','champion','change','channel','charge','chart','chase','check','choke','circumscribe','circumvent','clap','clarify','clash','classify','classify','climb','clip','clutch','coach','collaborate','collapse','collar','collate','collect','collide','combine','command','commandeer','communicate','competently','compile','complete','comply','compose','compute','compute','conceive','conclusively','condense','conduct','confer','configure','conserve','consistently','consolidate','construct','consult','contract','control','conveniently','convert','coordinate','correlate','counsel','count','cram','crash','crawl','create','creep','cripple','critique','crouch','cultivate','cure','customize','cut','dance','dart','dash','deal','debate','decide','decidedly','decisively','deck','decorate','decrease','deduct','define','delegate','delete','deliberate','delineate','deliver','demonstrate','derive','descend','describe','design','detail','detect','determine','develop','devise','devise','diagnose','dictate','dig','diligently','direct','discard','discover','dispatch','display','dissect','distinguish','distribute','distribute','ditch','dive','divert','do','dodge','dominate','dope','double','douse','draft','drag','drain','dramatize','drape','draw','dress','drill','drink','drip','drop','drown','drug','dry','duel','dunk','earn','ease','easily','edge','edit','edit','educate','effect','effectively','effectually','efficiently','effortlessly','eject','elect','elevate','eliminate','elope','elude','emerge','employ','enable','enact','encourage','endure','engage','engineer','enjoin','ensnare','ensure','enter','equip','erupt','escalate','escape','establish','establish','estimate','evacuate','evade','evaluate','evict','examine','execute','exert','exhale','exhibit','exit','expand','expand','expedite','expel','explode','experience','experiment','expertly','explain','explore','expose','extend','extirpate','extract','extricate','facilitate','fade','fake','fall','falter','fan','fashion','fast','faultlessly','favorably','fear','feed','feel','fend','field','fight','file','fill','finance','find','finger','finish','fix','flag','flap','flash','flatten','flaunt','flay','flee','flick','flinch','fling','flip','flit','float','flog','flounder','flout','flush','fly','focus','fondle','force','forecast','forge','formalize','form','formulate','fornicate','foster','found','fumble','functionally','fund','furnish','gain','gainfully','gallop','gather','generate','gesture','get','give','gnaw','gossip','gouge','govern','graduate','grab','grapple','grasp','greet','grind','grip','grope','ground','grow','growl','grunt','guard','guide','gyrate','hack','hail','halt','halve','hammer','handle','hang','harass','hasten','haul','head','help','hesitate','hide','hijack','hire','hit','hitch','hobble','hoist','hold','hover','hug','hurl','hurtle','hypothesize','identify','ignore','illustrate','imitate','implement','improve','improvise','inch','increase','increase','index','indict','individualize','induce','inflict','influence','inform','initiate','inject','injure','innovate','insert','inspect','inspire','install','instigate','institute','instruct','integrate','intensify','interchange','interpret','interview','introduce','invade','invent','inventory','invest','investigate','isolate','itemize','jab','jam','jar','jeer','jerk','jimmy','jingle','jolt','judge','jump','justify','keel','keynote','kibitz','kick','kidnap','kill','kneel','knife','land','lash','launch','lead','lean','leap','learn','lecture','led','left','lessen','level','license','lick','limp','link','listen','locate','log','lower','lunge','lurch','make','maim','maintain','make','manage','mangle','manipulate','manufacture','march','mark','market','massage','master','maul','measure','meddle','mediate','meet','mend','mentor','mimic','mingle','minimize','mobilize','mock','model','mold','molest','monitor','motivate','mourn','move','multiply','mumble','murder','muster','mutilate','nab','nag','nail','narrow','needle','negotiate','nick','nip','nominate','nurture','observe','obtain','occupy','offer','officiate','operate','order','organize','originate','outline','overcome','oversee','pack','participate','paddle','page','pander','panic','parachute','parade','paralyze','park','parry','party','pass','pat','patrol','pause','paw','peel','peep','penetrate','perceive','perfect','perform','persuade','photograph','pick','picket','pile','pilot','pin','pinch','pioneer','pirate','pitch','placate','place','plan','play','plod','plow','plunge','pocket','poke','polish','pore','pose','position','pounce','pout','pray','predict','preen','prepare','prescribe','present','preside','preside','primp','print','prioritize','probe','process','procure','prod','produce','profitable','program','project','promote','prompt','proofread','propel','propose','protect','prove','provide','provoke','pry','publicize','publish','pull','pummel','pump','punch','purchase','purge','pursue','push','qualify','question','quicken','quit','quiz','race','raid','raise','rally','ram','ransack','rape','rate','rattle','ravage','rave','read','realize','rebuild','receive','recline','recommend','reconcile','reconnoiter','record','recoup','recruit','redeem','reduce','reel','refer','regain','regulate','reinforce','rejoin','relate','relate','relax','relent','relentlessly','relieve','remove','render','renew','renovate','reorganize','repair','repel','report','represent','repulse','research','resign','resist','resolve','respond','restore','retain','retaliate','retreat','retrieve','reveal','review','revise','ride','rip','rise','risk','rob','rock','roll','rub','run','rush','sail','salute','sap','satisfy','save','saw','scale','scamper','scan','scare','scatter','scavenge','schedule','scold','scoop','scoot','score','scour','scout','scrape','scrawl','scream','screen','screw','scrub','scruff','scuffle','sculpt','scuttle','seal','search','secure','seduce','segment','seize','select','sell','sense','serve','service','set','set up','sever','sew','shake','shanghai','shape','share','sharpen','shave','shear','shell','shield','shift','shiver','shock','shoot','shorten','shout','shove','shovel','show','shun','shut','sidestep','sigh','signal','simplify','sip','sit','size','skid','skim','skip','skirt','slacken','slam','slap','slash','slay','slide','slug','smack','smear','smell','smuggle','snap','snare','snarl','snatch','snicker','sniff','snitch','snoop','snub','snuff','snuggle','soak','sock','soil','Sold','solve','sort','spark','spear','spell','spike','spin','splatter','splice','split','spot','spray','spread','spring','sprint','spurn','spy','squeak','stack','staff','stagger','stamp','stand','start','startle','steal','steer','step','stick','stiffen','stifle','stimulate','stock','stomp','stop','strangle','strap','strategize','streamline','strengthen','stress','strike','strip','stroke','struck','structure','stub','study','stuff','stumble','stun','subdue','submerge','submit','submit','succeed','suck','summarize','sum','summon','supervise','supply','support','surrender','survey','suspend','sustain','swagger','swallow','swap','sway','swear','swerve','swim','swing','swipe','switch','synergize','synthesize','systematize','tabulate','tackle','take','tap','target','taste','taunt','teach','tear','tease','telephone','terrorize','test','thin','thrash','thread','threaten','throw','tickle','tie','tighten','tilt','tip','toss','touch','tout','track','train','transcribe','transfer','transfer','transform','translate','transport','trap','tread','treat','trim','trip','triple','trot','trounce','try','tuck','tug','tumble','turn','tutor','twist','type','uncover','understand','undertake','undo','undress','unfold','unify','uniformly','unify','unite','unravel','untangle','unwind','update','usefully','usher','utilize','utilize','vacate','validate','value','vanish','vanquish','vault','vent','verbalize','verify','violate','wade','walk','wander','ward','watch','wave','wedge','weed','weigh','whack','whip','whirl','whistle','widen','wield','wiggle','win','withdraw','withdraw','work','wreck','wrench','wrestle','write','wrought','yank','yell','yelp','yield','zap','zip']; var count = 0; function loop () { var word = words.pop(); if (!word) return; placeParticle(word, function () { loop(); document.querySelector('.count').innerHTML = ++count; progress.update(count/1000); }); } for (var i = 0, len = words.length > 200 ? 200 : words.length; i < len; i++) { loop(); } </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 吊炸天的进度效果