Ever seen those images that appear to be moving but are not? They take advantage of peripheral drift in our vision.
But what about the vision of our pets? My SVG slideshow asks the simple question: “Does your pet see peripheral drift?” I don’t actually know the answer so people can load it onto their tablets and place it on the floor in front of your pets to see them react or not. Double-click the slideshow to go fullscreen.
An innovative method of displaying the images takes advantage of the poster attribute of the video element along with the Metadata type of WebVTT captions file which stores data: URIs of the SVG images using the oncuechange event of the track element to switch between each image. A dummy silent audio file with a duration of the slideshow is used allowing the video controls to scrub through it, and even control the speed of it.
True, I do see the irony in using a “moving pictures” element to display pictures which seem to be moving when in fact are not. But just think how those people’s minds will be blown when they tap/click the pause button…
Also I prefer to give the users power of that choice. In Firefox there’s a “Hide controls” option in the right-click context menu by default.
That raises the question: What is a “real” slideshow? Here’s an interesting side note: the Thumbnails on the side are actually a single SVG file which when viewed standalone is it’s own slideshow (albeit in a cruder form) - https://peripheraldrift.glitch.me/thumbnailSMIL.svg
Yeah in my experience there’s no one plain slideshow. People can use CSS animation of background images, or JS to load in images through AJAX, and of course there are uncountable frameworks offering a slideshow feature usually at multiple resolutions with horribly generated DIV nesting nightmare code, though I guess that’s a matter of standards compliance/accessibility opinions. You won’t find a single DIV in my slideshow, which in reality is just another “plain” variant offered freely if others so choose to use it for themselves.
For me having all the images in SVG format makes them infinite resolution while tiny in filesize (40kb total for 14 images) so besides going fullscreen on any device seamlessly, I also included plain CSS resize:both control at the bottom right corner to play with. Not something I see enough of elsewhere.
