Text Vortex

Developer
Chad Scira
Size
6,534 Kb
Views
42,504
  1. Text Vortex Previews
  2. Text Vortex HTML Codes
  3. Text Vortex CSS Codes
  4. Text Vortex JS Codes

How do I make an text vortex?

What is a text vortex? How do you make a text vortex? This script and codes were developed by Chad Scira on 24 August 2022, Wednesday.

Text Vortex Previews
IQ Test

Text Vortex - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text Vortex</title> <link rel="stylesheet" href="css/style.css">
</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 src="js/index.js"></script>
</body>
</html>

Text Vortex - Script Codes CSS Codes

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

Text Vortex - Script Codes JS Codes

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();
}
Text Vortex - Script Codes
Text Vortex - Script Codes
Home Page Home
Developer Chad Scira
Username icodeforlove
Uploaded August 24, 2022
Rating 4
Size 6,534 Kb
Views 42,504
Do you need developer help for Text Vortex?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chad Scira (icodeforlove) Script Codes
Name
Curl Request to Node Request
Faces
Ripple Words
Delayed Follow
CSS Voxel Animation
Client-side nudity detection
8bit Animation
A Pen by Chad Scira
Canvas Text Vortex
FontAwesome
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!