Skip to content

Instantly share code, notes, and snippets.

@YodasWs

YodasWs/screensaver.html

Created December 19, 2016 14:01
Show Gist options
  • Save YodasWs/0e2ec0fe76ed3720f4ff014b88a01337 to your computer and use it in GitHub Desktop.
Save YodasWs/0e2ec0fe76ed3720f4ff014b88a01337 to your computer and use it in GitHub Desktop.
Download ZIP
A quick page I threw together to cycle through images like a screensaver :D
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment