Letter fountain

Developer
Aurer
Size
2,607 Kb
Views
50,600
  1. Letter fountain Previews
  2. Letter fountain HTML Codes
  3. Letter fountain CSS Codes
  4. Letter fountain JS Codes

How do I make an letter fountain?

A simple experiment with canvas particle systems. What is a letter fountain? How do you make a letter fountain? This script and codes were developed by Aurer on 03 August 2022, Wednesday.

Letter fountain Previews
IQ Test

Letter fountain - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Letter fountain</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body{ background: #000; width: 100%; padding: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id="c"></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Letter fountain - Script Codes CSS Codes

html, body{ background: #000; width: 100%; padding: 0;
}

Letter fountain - Script Codes JS Codes

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();
var anim = {	init: function(){	var canvas	= document.getElementById('c');	canvas.width	= window.innerWidth;	canvas.height	= window.innerHeight;	this.c	= canvas.getContext('2d');	this.letters	= "ABCDEFGHIJKLMNOPQRSTUVWXYZ";	this.gravity	= 0.1; this.maxParticles = 100;	this.cw	= canvas.width,	this.ch	= canvas.height,	this.particles	= []	},	render: function(){	this.fadeCanvas();	var particle = { x:	anim.cw/2, y:	anim.ch, xSpeed: (Math.random()*20)-10, ySpeed: (Math.random()*20)-10, size:	10, character: anim.letters[Math.floor( Math.random() * anim.letters.length )], color:	[155, 100, 50, .7]	}	this.particles.push(particle); this.tidyParticles();	this.drawParticles();	},	drawParticles: function(){	var paritcleCount = this.particles.length;	var c = this.c; for(var i=0; i < paritcleCount; i++){ var particle = this.particles[i]; var h = particle.color[0], s = particle.color[1] + '%', l = particle.color[2] + '%', a = particle.color[3]; var hsla = 'hsla(' + h + ',' + s + ',' + l + ',' + a + ')'; c.font = "12px sans-serif"; c.fillStyle = hsla; c.fillText(particle.character, particle.x, particle.y); particle.x += particle.xSpeed; particle.y += particle.ySpeed; particle.size *= 0.96; particle.y *= 0.98; particle.color[2] *= 0.99; particle.color[0] += 1; if(particle.color[0] > 253){ particle.color[2] = 100; particle.color[3] = 1; } }	}, tidyParticles: function(){ if( this.particles.length > this.maxParticles ){ this.particles.shift(); } },	fadeCanvas: function(){	this.c.fillStyle = 'rgba(0,0,0,0.1)';	this.c.fillRect(0, 0, this.cw, this.ch);	}
}
anim.init();
(function animloop(){ requestAnimFrame(animloop); anim.render();
})();
Letter fountain - Script Codes
Letter fountain - Script Codes
Home Page Home
Developer Aurer
Username aurer
Uploaded August 03, 2022
Rating 4
Size 2,607 Kb
Views 50,600
Do you need developer help for Letter fountain?

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!

Aurer (aurer) Script Codes
Name
IOS style checkbox concept
Tomcat chrome extension UI
Vue form theme
JS Gradient
One of those text scrollers
Collapsing list indicator animation
Squished forms mockup
A responsive table
ERC Search panels mockup
Super Clock
Create amazing blog posts 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!