sizeoftime

<html>
<div id="canvas">
    <div class="image" seconds="60">
        <img src="images/clock.jpg">
        <div class="description">
            The minute hand on a clock goes around every minute.
        </div>
    </div>
    <div class="image" seconds="1">
        <img src="images/eye.jpg">
        <div class="description">
            Blinking takes about a second.
        </div>
    </div>
</div>
<div id="display">Seconds: 1</div>
<!-- Slider value is logarithmic for ease of use. -->
<input type="range" min="-1" max="2" default="0" step="0.01" id="slider"></input>

<style>
/* Give canvas a set height. Anything that goes beyond the edges is hidden. */
#canvas {
    width: 500px;
    height: 500px;

    position: relative;
    overflow: hidden;
}

/* Slider width should match canvas width. */
#slider {
    width: 500px;
}

/* Images on the canvas, by default, are not shown. */
.image {
    position: absolute;
    display: none;
}

.image img {
    width: 100%;
    height: 100%;
}

/* Image descriptions are default hidden... */
.image .description {
    display: none;
}

/* ...but are visible when the image is hovered over. */
.image:hover .description {
  display: block;
}
</style>

<script>
// Get handles for the various elements in the document
var slider = document.getElementById('slider');
var canvas = document.getElementById('canvas');
var display = document.getElementById('display');
var elements = document.getElementsByClassName('image'); // This returns an array, all others are single elements.

// Get size of canvas
var canvasHeight = canvas.clientHeight;
var canvasWidth = canvas.clientWidth;

function updateElements() {
    // Slider value is logarithmic.
    var seconds = Math.pow(10, parseFloat(slider.value));

    // Set display to show current time
    display.innerHTML = `Seconds: ${seconds}`

    // Loop over each element and update their positions/sizes.
    for(var element of elements) {
        var scale = element.getAttribute('seconds') / seconds;

        if((scale > 4) || (scale < 0.02)) {
            // Image too large or too small to be seen - don't display at all.
            element.style.display = 'none';
        }
        else {
            // Show elements if they were hidden before.
            element.style.display = 'block';

            // Size image, assuming square canvas and square images.
            // The image shouldn't take up the whole screen, hence the /2 at the end.
            var size = canvasWidth * scale / 2;
            element.style.width = size;
            element.style.height = size;

            // Place image horizontally. For simplicity, starts at left and moving right.
            // An image at 1x scale will be in the exact center.
            var distanceFromLeft = (canvasWidth * scale - size) / 2;
            element.style.left = distanceFromLeft;

            // Place image vertically. For simplicity, this just centers it.
            var distanceFromTop = (canvasHeight - size) / 2;
            element.style.top = distanceFromTop;
        }
    }
}

// Call the function once to show initial elements.
updateElements(slider.value);

// Register update function to happen whenever the slider is moved.
slider.oninput = updateElements;
</script>
</html>