I wanted the mime artist to fall when the floor was made transparent, but with my beginner knowledge of webpage building, I was struggling to acheive this.
I made the mime artist gifs in GIMP, drawing them with a (computer) mouse.
Some of the sources and tutorials I found and learnt from (accessed 2025-10-01, and 2025-10-02):
- 'Introduction to Web Interaction Design With HTML and CSS' by Micheal Macaulay (2018)
- CSS colours: https://en.wikipedia.org/wiki/Web_colors
- Changing an image after time: https://stackoverflow.com/questions/60748752/change-an-image-after-some-time
- Interactive opacity slider that I modeled mine on: https://codelucky.com/css-opacity-2/#Interactive_Opacity_Control_Demo
- Changing a colour's alpha using javascript: https://stackoverflow.com/questions/48533565/change-css-rgba-background-colors-alpha-value-using-js
- Variables in strings in javascript: https://stackoverflow.com/questions/19105009/how-to-insert-variables-in-javascript-strings
- To reset the slider onload: https://www.w3schools.com/jsref/event_onload.asp
- For changing text colour I used HSL: https://www.w3schools.com/colors/colors_hsl.asp
- Changing the colour of links using javascript: https://stackoverflow.com/questions/5131379/how-to-change-the-color-of-the-links-with-javascript
- For debugging I used Firefox's Inspect tool, which linked to a help on specific errors: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors
- For the popover: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using
- To do 2 transforms at once: https://stackoverflow.com/questions/32875695/flip-mirror-an-image-horizontally-vertically-with-css