dckesler
12/9/2015 - 10:12 PM

toast.js

var parser = new DOMParser();

function sendTheToast() {
	var html = `
		<img style="bottom: 0; position: absolute; left: 15px; z-index: 10000; width: 350px;" src="http://media.coopelectricalshop.co.uk/media/default/Products/RUS-TOA-20720-SS.png" />
	`
	var toast = parser.parseFromString(html, 'text/html').documentElement.children[1].children[0];
	document.body.appendChild(toast);
	setTimeout(function(){
		var pieceHtml = `
			<img style="bottom: 0; position: absolute; left: 15px; z-index: 9999"; width: 50px;" src="https://upload.wikimedia.org/wikipedia/commons/3/37/Toast-2.png" />
		`
		var piece = parser.parseFromString(pieceHtml, 'text/html').documentElement.children[1].children[0];
		document.body.appendChild(piece);
		flyToast(piece);
	}, 1000);
}

function flyToast(piece, velocity) {
	if (!velocity) velocity = {y: Math.round(Math.random() * 60 + 150), x: Math.round(Math.random() * 20 + 5), currentY: 100 , currentX: 50};
	piece.style.bottom = velocity.currentY;
	piece.style.left = velocity.currentX;
	velocity.y -= 10;
	velocity.currentY += velocity.y;
	velocity.currentX += velocity.x;
	setTimeout(function(){
		if(velocity.currentY > 0) flyToast(piece, velocity);
	}, 100)
}

sendTheToast();