Skip to content

Instantly share code, notes, and snippets.

@osharaki

osharaki/crazy_switches.html

Created August 28, 2020 19:17
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save osharaki/6af5bcac020fef3b04ab47a9e8790500 to your computer and use it in GitHub Desktop.
Save osharaki/6af5bcac020fef3b04ab47a9e8790500 to your computer and use it in GitHub Desktop.
Download ZIP
A bunch of centered, horizontally laid-out, randomly toggling switches
Raw
crazy_switches.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:root {
/* Original values */
--slider-height: 34;
--slider-width: 60px;
--slider-border-radius: 34px;
--thumb-width: 26px;
--thumb-height: 26px;
--thumb-pos-left: 4px;
--thumb-pos-bottom: 4px;
--input-blur-radius: 1px;
/* New reference value */
--slider-new-height: 20;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: calc((var(--slider-width) * var(--slider-new-height)) / var(--slider-height));
height: calc(var(--slider-new-height) * 1px);
margin: 5px;
/* A neat way of appending a unit to a number variable */
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .2s;
transition: .2s;
}
.slider:before {
position: absolute;
content: "";
height: calc((var(--thumb-height) * var(--slider-new-height)) / var(--slider-height));
width: calc((var(--thumb-width) * var(--slider-new-height)) / var(--slider-height));
left: calc((var(--thumb-pos-left) * var(--slider-new-height)) / var(--slider-height));
bottom: calc((var(--thumb-pos-bottom) * var(--slider-new-height)) / var(--slider-height));
background-color: white;
-webkit-transition: .2s;
transition: .2s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 calc((var(--input-blur-radius) * var(--slider-new-height)) / var(--slider-height)) #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(calc((var(--thumb-width) * var(--slider-new-height)) / var(--slider-height)));
-ms-transform: translateX(calc((var(--thumb-width) * var(--slider-new-height)) / var(--slider-height)));
transform: translateX(calc((var(--thumb-width) * var(--slider-new-height)) / var(--slider-height)));
}
/* Rounded sliders */
.slider.round {
border-radius: calc((var(--slider-border-radius) * var(--slider-new-height)) / var(--slider-height));
}
.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<label class="switch" style="--slider-new-height: 5;">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch" style="--slider-new-height: 10;">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch" style="--slider-new-height: 15;">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch" style="--slider-new-height: 20;">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch" style="--slider-new-height: 25;">
<input type="checkbox">
<span class="slider round"></span>
</label>
<label class="switch" style="--slider-new-height: 30;">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<script>
const switches = document.getElementsByTagName('input');
setDelay(3000, switches[0]);
setDelay(3000, switches[1]);
setDelay(3000, switches[2]);
setDelay(3000, switches[3]);
setDelay(3000, switches[4]);
setDelay(3000, switches[5]);
function setDelay(maxDelay, myswitch) {
const delay = Math.random() * Math.floor(maxDelay);
myswitch.click();
setTimeout(setDelay, delay, maxDelay, myswitch);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment