YodasWs/screensaver.html

## screensaver.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Samuel Grundman presents Green Christmas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style>
* {
	box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
body {
	position: relative;
	background-color: forestgreen;
	transition: background-color 800ms ease-in-out 100ms;
}
div.tree {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 700px;
	width: 500px;
	max-height: calc(100% - 60px);
	max-width: calc(100% - 60px);
	opacity: 0;
	transition: all 1s ease-in 100ms, opacity 1s ease-in;
	box-shadow: 0 0 50px 26px transparent, inset 0 0 50px 26px transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
div:not(.tree) { display: none; }
div.tree.show {
	transition: all 1s ease-out 1s, opacity 1s ease-out 800ms;
	opacity: 1;
}
</style>
<script>
window.timing = 5000;
window.i = 0;
window.hist = [];
window.last = {
	border: '',
	bg: ''
};
window.borders = [
	'mediumseagreen',
	'darkseagreen',
	'forestgreen',
	'lightgreen',
	'limegreen',
	'seagreen',
	'green'
];
window.bgs = [
	'mediumseagreen',
	'darkseagreen',
	'forestgreen',
	'lightgreen',
	'limegreen',
	'seagreen',
	'green'
];
window.imgs = [
	'christmas-tree-clip-art-7eiMenRcn.png',
	'flat_christmas_tree.jpg',
	'creative-cristmas-tree-478jpg__605.jpg',
	'creative-cristmas-tree-54__605.jpg',
	'creative-cristmas-tree-471__605.jpg',
	'tree2.jpg',
	'tree3.jpg',
	'tree4.png',
	'tree5.jpg',
	'tree6.jpg',
	'tree7.jpg',
	'tree8.jpg',
	'beach-tree1.jpg'
];
function switchTree() {
	var numImg = $('div.tree').length;
	let k = 0, bg1, bg2;
	// Pick Tree Image
	do {
		i = Math.floor(Math.random() * numImg);
	} while (k++ < 100 && hist.indexOf(i) > -1);
	hist.push(i);
	if (hist.length >= numImg) {
		hist = hist.splice(hist.length - 3)
	}
	// Pick Background Colors
	k = 0;
	do {
		bg1 = bgs[Math.floor(Math.random() * bgs.length)];
		bg2 = borders[Math.floor(Math.random() * borders.length)];
	} while (k++ < 100 && bg1 === bg2 && bg1 !== last.bg && bg2 !== last.border);
	// Update DOM
	$('body').css('background-color', bg1);
	$('div.tree.show').removeClass('show')
	$($('div.tree')[i]).addClass('show')
	$('div.tree:not(.show)').css({
		'box-shadow':
			'0 0 50px 26px transparent' +
			', inset 0 0 50px 26px transparent'
	})
	$('div.tree.show').css({
		'background-color': bg2,
		'box-shadow':
			'0 0 50px 26px ' + bg2 +
			', inset 0 0 50px 26px ' + bg2
	});
	setTimeout(switchTree, timing + Math.floor(Math.random() * 5 - 2) * 1000);
}
function addImgToDOM() {
	$('<div class="tree">').css({
		'background-image':'url("' + this.src + '")',
		height: this.height,
		width: this.width
	}).appendTo('body');
};
$(()=>{
	imgs.forEach((img) => {
		let i = new Image();
		i.src = img;
		i.onload = addImgToDOM;
	});
	setTimeout(switchTree, 100);
})</script>
</head>
<body>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Samuel Grundman presents Green Christmas</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<style>
	* {
	box-sizing: border-box;
	}
	html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	}
	body {
	position: relative;
	background-color: forestgreen;
	transition: background-color 800ms ease-in-out 100ms;
	}
	div.tree {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 700px;
	width: 500px;
	max-height: calc(100% - 60px);
	max-width: calc(100% - 60px);
	opacity: 0;
	transition: all 1s ease-in 100ms, opacity 1s ease-in;
	box-shadow: 0 0 50px 26px transparent, inset 0 0 50px 26px transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	}
	div:not(.tree) { display: none; }
	div.tree.show {
	transition: all 1s ease-out 1s, opacity 1s ease-out 800ms;
	opacity: 1;
	}
	</style>
	<script>
	window.timing = 5000;
	window.i = 0;
	window.hist = [];
	window.last = {
	border: '',
	bg: ''
	};
	window.borders = [
	'mediumseagreen',
	'darkseagreen',
	'forestgreen',
	'lightgreen',
	'limegreen',
	'seagreen',
	'green'
	];
	window.bgs = [
	'mediumseagreen',
	'darkseagreen',
	'forestgreen',
	'lightgreen',
	'limegreen',
	'seagreen',
	'green'
	];
	window.imgs = [
	'christmas-tree-clip-art-7eiMenRcn.png',
	'flat_christmas_tree.jpg',
	'creative-cristmas-tree-478jpg__605.jpg',
	'creative-cristmas-tree-54__605.jpg',
	'creative-cristmas-tree-471__605.jpg',
	'tree2.jpg',
	'tree3.jpg',
	'tree4.png',
	'tree5.jpg',
	'tree6.jpg',
	'tree7.jpg',
	'tree8.jpg',
	'beach-tree1.jpg'
	];
	function switchTree() {
	var numImg = $('div.tree').length;
	let k = 0, bg1, bg2;
	// Pick Tree Image
	do {
	i = Math.floor(Math.random() * numImg);
	} while (k++ < 100 && hist.indexOf(i) > -1);
	hist.push(i);
	if (hist.length >= numImg) {
	hist = hist.splice(hist.length - 3)
	}
	// Pick Background Colors
	k = 0;
	do {
	bg1 = bgs[Math.floor(Math.random() * bgs.length)];
	bg2 = borders[Math.floor(Math.random() * borders.length)];
	} while (k++ < 100 && bg1 === bg2 && bg1 !== last.bg && bg2 !== last.border);
	// Update DOM
	$('body').css('background-color', bg1);
	$('div.tree.show').removeClass('show')
	$($('div.tree')[i]).addClass('show')
	$('div.tree:not(.show)').css({
	'box-shadow':
	'0 0 50px 26px transparent' +
	', inset 0 0 50px 26px transparent'
	})
	$('div.tree.show').css({
	'background-color': bg2,
	'box-shadow':
	'0 0 50px 26px ' + bg2 +
	', inset 0 0 50px 26px ' + bg2
	});
	setTimeout(switchTree, timing + Math.floor(Math.random() * 5 - 2) * 1000);
	}
	function addImgToDOM() {
	$('<div class="tree">').css({
	'background-image':'url("' + this.src + '")',
	height: this.height,
	width: this.width
	}).appendTo('body');
	};
	$(()=>{
	imgs.forEach((img) => {
	let i = new Image();
	i.src = img;
	i.onload = addImgToDOM;
	});
	setTimeout(switchTree, 100);
	})</script>
	</head>
	<body>
	</body>
	</html>