♔ Everyday King ♔ is a clumsy and well-meaning experiment with HTML, CSS and Javascript that features Kerry King of Slayer.
In its current form, the images for ♔ Everyday King ♔ are drawn from a manually defined list and then displayed randomly over a specified duration. The Javascript and CSS is a hodgepodge and probably isn’t the most efficient way of doing things.
In a more ideal and enhanced form, the images for ♔ Everyday King ♔ would be drawn from the infinite source of Kerry King photographs on the web, possibly through web scraping or similar dynamic techniques, and then more seamlessly displayed in the browser. Something fun to learn.
<!doctype html>
<html>
<head>
<title>♔ Everyday King ♔</title>
<meta name="description" content="Everyday King. Non-stop random photographs of Kerry King all day, every day. Forever.">
<meta name="keywords" content="Kerry King, Kerry, King, Slayer, Every, Day, All day, Forever">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<style type="text/css">
/* HTML Colour Shades https://www.w3schools.com/colors/colors_shades.asp */
body {
margin: 0;
padding: 0;
font-family: 'Bebas Neue', sans-serif;
box-sizing: border-box;
/* color: #F5F5F5; */
/* color: #fff; */
color: #c00000;
background-color: #333;
}
/* Sourced from 'Change Background Image Every Second with CSS & JavaScript | Random background image' https://www.youtube.com/watch?v=NTqmimXu1XM */
section {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #383838;
background: url(images/kk_00001.png);
display: flex;
/*justify-content: center; */
background-size: cover;
background-position: center center;
/* background-size: auto 100%; */
}
/* css approach to alignment courtesy of https://stackoverflow.com/questions/47456137/center-text-in-screen-when-resize-browser */
#container {
display: table;
height: 90%;
width: 90%;
position: absolute;
padding-left: 1em;
}
#text {
text-align: center;
display: table-cell;
vertical-align: middle;
font-weight: bold;
font-size: 5.5em;
/* CSS text spacing https://www.w3schools.com/css/css_text_spacing.asp */
line-height: 0.7;
letter-spacing:-2px;
opacity: 0.7;
/* -webkit-text-stroke: 0.001em black; */
/* -webkit-text-fill-color: #c00000; */
/* Other stuff about text opacity from https://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css */
}
</style>
</head>
<body>
<!-- style the 'section' and then hit it with javascript -->
<section> </section>
<!-- 'Change Background Image Every Second with CSS & JavaScript | Random background image' https://www.youtube.com/watch?v=NTqmimXu1XM -->
<script>
function changeBG(){
const images = [
'url("images/kk_00001.png")',
'url("images/kk_00002.png")',
'url("images/kk_00003.png")',
'url("images/kk_00004.png")',
'url("images/kk_00005.png")',
'url("images/kk_00006.png")',
'url("images/kk_00007.png")',
'url("images/kk_00008.png")',
'url("images/kk_00009.png")',
'url("images/kk_00010.png")',
'url("images/kk_00011.png")',
'url("images/kk_00012.png")',
'url("images/kk_00013.png")',
'url("images/kk_00014.png")',
'url("images/kk_00015.png")',
'url("images/kk_00016.png")',
'url("images/kk_00017.png")',
'url("images/kk_00018.png")',
'url("images/kk_00019.png")',
'url("images/kk_00020.png")',
'url("images/kk_00021.png")',
'url("images/kk_00022.png")',
'url("images/kk_00023.png")',
'url("images/kk_00024.png")',
'url("images/kk_00025.png")',
'url("images/kk_00026.png")',
'url("images/kk_00027.png")',
'url("images/kk_00028.png")',
'url("images/kk_00029.png")',
'url("images/kk_00030.png")',
'url("images/kk_00031.png")',
'url("images/kk_00032.png")',
'url("images/kk_00033.png")',
'url("images/kk_00034.png")',
'url("images/kk_00035.png")',
'url("images/kk_00036.png")',
'url("images/kk_00037.png")',
'url("images/kk_00038.png")',
'url("images/kk_00039.png")',
'url("images/kk_00040.png")',
'url("images/kk_00041.png")',
'url("images/kk_00042.png")',
'url("images/kk_00043.png")',
'url("images/kk_00044.png")',
'url("images/kk_00045.png")',
'url("images/kk_00046.png")',
'url("images/kk_00047.png")',
'url("images/kk_00048.png")',
'url("images/kk_00049.png")',
'url("images/kk_00050.png")',
'url("images/kk_00051.png")',
'url("images/kk_00052.png")',
'url("images/kk_00053.png")',
'url("images/kk_00054.png")',
'url("images/kk_00055.png")',
]
const section = document.querySelector('section')
const bg = images[Math.floor(Math.random() * images.length)];
section.style.backgroundImage = bg;
}
setInterval(changeBG, 9000)
</script>
<div id="container">
<div id="text">Everyday King.<br>Non-stop stream of random photographs<small><small><sup>*</sup></small></small> of Kerry King from Slayer. All day. Every day. Forever.</div>
</div>
</body>
</html>