End of the Rainbow

Developer
Darryl Huffman
Size
3,722 Kb
Views
8,096
  1. End of the Rainbow Previews
  2. End of the Rainbow HTML Codes
  3. End of the Rainbow CSS Codes
  4. End of the Rainbow JS Codes

How do I make an end of the rainbow?

Inspired by this: https://dribbble.com/shots/3359349-Lucky-Day. What is a end of the rainbow? How do you make a end of the rainbow? This script and codes were developed by Darryl Huffman on 07 January 2023, Saturday.

End of the Rainbow Previews
IQ Test

End of the Rainbow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>End of the Rainbow</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="card">	<div class="image"></div>	<h2>GOLD</h2>	<p>END OF RAINBOW</p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

End of the Rainbow - Script Codes CSS Codes

html, body { width: 100%; height: 100%; background: #014520; /* Old browsers */ background: -moz-linear-gradient(45deg, #000 0%, #333 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #000 0%, #333 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, #000 0%, #333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#333',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ display: flex;
}
.card { z-index: 5; position: relative; width: 260px; height: 360px; box-shadow: -3px 5px 10px rgba(0, 0, 0, 0.5); border-radius: 2px; background-color: #E7F0F2; margin: auto; font-family: sans-serif; padding: 20px; box-sizing: border-box;
}
.card .image { background-color: #161d1a; width: 220px; height: 220px;
}
.card canvas { position: absolute; top: 0px; left: 0px;
}
.card h2 { padding-top: 20px; font-size: 25px; font-weight: bold;
}
.card p { font-size: 13px; padding-top: 5px;
}

End of the Rainbow - Script Codes JS Codes

var size = {	x: $('.card').width() + 40,	y: $('.card').height() + 40
};
var spawnArea = {	x: 20,	y: 20,	width: $('.card .image').width(),	height: $('.card .image').height()
};
var coinRadius = 40;
var halfCoinRadius = (coinRadius/2);
var canvas = $('<canvas/>').attr({width: size.x, height: size.y}).appendTo('.card'), context = canvas.get(0).getContext("2d");
var bottomCoins = [];
var topCoins = [];
var coin = function(n){	this.x = (Math.random() * spawnArea.width) + 40;	this.y = n == true ? (Math.random() * spawnArea.height) + 20 - coinRadius : 0;	this.r = Math.random() * (Math.PI * 2);	this.vx = (Math.random() * 1) - 0.5;	this.vy = (Math.random() * 3) + 1.5;	this.vr = (Math.random() * 0.2) - 0.1;	this.c = Math.floor(Math.random() * 40) >= 1;	if(this.c){	this.id = bottomCoins.length;	bottomCoins.push(this);	} else {	topCoins.push(this);	}
}
coin.prototype.draw = function(){	this.x += this.vx;	this.y += this.vy;	this.r += this.vr;	if(this.c && this.y > spawnArea.height+coinRadius*2){	bottomCoins[this.id] = undefined;	}	if(!this.c && this.y > size.y+coinRadius*2){	topCoins[this.id] = undefined;	}	context.save();	context.translate(this.x - halfCoinRadius, this.y - halfCoinRadius);	context.rotate(this.r);	var l = 43 + this.r;	context.beginPath();	context.arc(0,0,coinRadius,0,2*Math.PI);	context.fillStyle = 'hsl(42, 89%, '+(l+5)+'%)';	context.fill();	context.closePath();	context.beginPath();	context.arc(0,0,coinRadius-5,0,2*Math.PI);	context.fillStyle = 'hsl(42, 89%, '+l+'%)';	context.fill();	context.closePath();	context.font="50px Georgia";	context.fillStyle='hsl(42, 89%, '+(l+10)+'%)';	context.fillText("¢",-15,15);	context.translate(-(this.x - halfCoinRadius), -(this.y - halfCoinRadius));	context.restore();
}
window.requestFrame = (function(){	return window.requestAnimationFrame ||	window.webkitRequestAnimationFrame ||	window.mozRequestAnimationFrame ||	function( callback ){	window.setTimeout(callback, 1000 / 60);	};
})();
function loop(){	context.clearRect(0,0,size.x,size.y);	for(var i = 0; i < bottomCoins.length; i++){	if(bottomCoins[i] != undefined){	bottomCoins[i].draw();	}	}	context.clearRect(0,0,spawnArea.x,spawnArea.height + spawnArea.y);	context.clearRect(spawnArea.width + spawnArea.x,0,spawnArea.x,spawnArea.height + spawnArea.y);	context.clearRect(0,spawnArea.height + spawnArea.y, size.x, size.y);	for(var i = 0; i < topCoins.length; i++){	topCoins[i].draw();	}	context.clearRect(0,0,size.x,spawnArea.y);	requestFrame(loop);
}
setInterval(function(){	new coin(false);
}, 20)
for(var i = 0; i < 60; i++){	new coin(true);
}
loop();
End of the Rainbow - Script Codes
End of the Rainbow - Script Codes
Home Page Home
Developer Darryl Huffman
Username darrylhuffman
Uploaded January 07, 2023
Rating 4.5
Size 3,722 Kb
Views 8,096
Do you need developer help for End of the Rainbow?

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!

Darryl Huffman (darrylhuffman) Script Codes
Name
A Perfect Orbit
Let it snow, let it snow, code the snow.
Hot Arrrr Balloon.
Fur
Spilled Paint
Math
Followers Solar System
Orbit
BLACKHOLE - A Canvas Experiment
Spilled Paint v2
Create amazing web content 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!