shenhuang/heartdemo.html

## heartdemo.html
<!--Copyright to Shen Huang, you can reach me out at shenhuang@live.ca-->

<!DOCTYPE html>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<html>
	<head>
		<title>HEART DEMO</title>
		<style>
		body	{
			background-color : #ffceed;
		}
		@keyframes heartfade {
			0% {
				opacity : 1;
			}
			50% {
				opacity : 0;
			}
		}
		.heart {
			z-index : 999;
			animation : heartfade 6s linear;
			position : absolute;
		}
		.heart:before,
		.heart:after {
			content : "";
			background-color : #fc2a62;
			position : absolute;
			height : 30px;
			width : 45px;
			border-radius : 15px 0px 0px 15px;
		}

		.heart:before {
			transform : rotate(45deg);
		}

		.heart:after {
			left : 10.5px;
			transform : rotate(135deg);
		}
		</style>
	</head>
	<body>

	</body>
	<script>

		var brd = document.createElement("DIV");
		document.body.insertBefore(brd, document.getElementById("board"));

		const duration = 3000;
		const speed = 0.5;
		const cursorXOffset = 0;
		const cursorYOffset = -5;

		var hearts = [];

		function generateHeart(x, y, xBound, xStart, scale)
		{
			var heart = document.createElement("DIV");
			heart.setAttribute('class', 'heart');
			brd.appendChild(heart);
			heart.time = duration;
			heart.x = x;
			heart.y = y;
			heart.bound = xBound;
			heart.direction = xStart;
			heart.style.left = heart.x + "px";
			heart.style.top = heart.y + "px";
			heart.scale = scale;
			heart.style.transform = "scale(" + scale + "," + scale + ")";
			if(hearts == null)
				hearts = [];
			hearts.push(heart);
			return heart;
		}

		var down = false;
		var event = null;

		document.onmousedown = function(e) {
			down = true;
			event = e;
		}

		document.onmouseup = function(e) {
			down = false;
		}

		document.onmousemove = function(e) {
			event = e;
		}

		document.ontouchstart = function(e) {
			down = true;
			event = e.touches[0];
		}

		document.ontouchend = function(e) {
			down = false;
		}

		document.ontouchmove = function(e) {
			event = e.touches[0];
		}

		var before = Date.now();
		var id = setInterval(frame, 5);
		var gr = setInterval(check, 100);

		function frame()
		{
			var current = Date.now();
			var deltaTime = current - before;
			before = current;
			for(i in hearts)
			{
				var heart = hearts[i];
				heart.time -= deltaTime;
				if(heart.time > 0)
				{
					heart.y -= speed;
					heart.style.top = heart.y + "px";
					heart.style.left = heart.x + heart.direction * heart.bound * Math.sin(heart.y * heart.scale / 30) / heart.y * 200 + "px";
				}
				else
				{
					heart.parentNode.removeChild(heart);
					hearts.splice(i, 1);
				}
			}
		}

		function check()
		{
			if(down)
			{
				var start = 1 - Math.round(Math.random()) * 2;
				var scale = Math.random() * Math.random() * 0.8 + 0.2;
				var bound = 30 + Math.random() * 20;
				generateHeart(event.pageX - brd.offsetLeft + cursorXOffset, event.pageY - brd.offsetTop + cursorYOffset, bound, start, scale);
			}
		}

	</script>
</html>
	<!--Copyright to Shen Huang, you can reach me out at shenhuang@live.ca-->

	<!DOCTYPE html>
	<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
	<html>
	<head>
	<title>HEART DEMO</title>
	<style>
	body {
	background-color : #ffceed;
	}
	@keyframes heartfade {
	0% {
	opacity : 1;
	}
	50% {
	opacity : 0;
	}
	}
	.heart {
	z-index : 999;
	animation : heartfade 6s linear;
	position : absolute;
	}
	.heart:before,
	.heart:after {
	content : "";
	background-color : #fc2a62;
	position : absolute;
	height : 30px;
	width : 45px;
	border-radius : 15px 0px 0px 15px;
	}

	.heart:before {
	transform : rotate(45deg);
	}

	.heart:after {
	left : 10.5px;
	transform : rotate(135deg);
	}
	</style>
	</head>
	<body>

	</body>
	<script>

	var brd = document.createElement("DIV");
	document.body.insertBefore(brd, document.getElementById("board"));

	const duration = 3000;
	const speed = 0.5;
	const cursorXOffset = 0;
	const cursorYOffset = -5;

	var hearts = [];

	function generateHeart(x, y, xBound, xStart, scale)
	{
	var heart = document.createElement("DIV");
	heart.setAttribute('class', 'heart');
	brd.appendChild(heart);
	heart.time = duration;
	heart.x = x;
	heart.y = y;
	heart.bound = xBound;
	heart.direction = xStart;
	heart.style.left = heart.x + "px";
	heart.style.top = heart.y + "px";
	heart.scale = scale;
	heart.style.transform = "scale(" + scale + "," + scale + ")";
	if(hearts == null)
	hearts = [];
	hearts.push(heart);
	return heart;
	}

	var down = false;
	var event = null;

	document.onmousedown = function(e) {
	down = true;
	event = e;
	}

	document.onmouseup = function(e) {
	down = false;
	}

	document.onmousemove = function(e) {
	event = e;
	}

	document.ontouchstart = function(e) {
	down = true;
	event = e.touches[0];
	}

	document.ontouchend = function(e) {
	down = false;
	}

	document.ontouchmove = function(e) {
	event = e.touches[0];
	}

	var before = Date.now();
	var id = setInterval(frame, 5);
	var gr = setInterval(check, 100);

	function frame()
	{
	var current = Date.now();
	var deltaTime = current - before;
	before = current;
	for(i in hearts)
	{
	var heart = hearts[i];
	heart.time -= deltaTime;
	if(heart.time > 0)
	{
	heart.y -= speed;
	heart.style.top = heart.y + "px";
	heart.style.left = heart.x + heart.direction * heart.bound * Math.sin(heart.y * heart.scale / 30) / heart.y * 200 + "px";
	}
	else
	{
	heart.parentNode.removeChild(heart);
	hearts.splice(i, 1);
	}
	}
	}

	function check()
	{
	if(down)
	{
	var start = 1 - Math.round(Math.random()) * 2;
	var scale = Math.random() * Math.random() * 0.8 + 0.2;
	var bound = 30 + Math.random() * 20;
	generateHeart(event.pageX - brd.offsetLeft + cursorXOffset, event.pageY - brd.offsetTop + cursorYOffset, bound, start, scale);
	}
	}

	</script>
	</html>