I used the video element to control an optical illusion slideshow

Project URL: https://peripheraldrift.glitch.me

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.

No frameworks used, just raw code. Enjoy!

3 Likes

Haha, I dunno :rofl:
Idea: try to disable video controls because people, when they see it’s a video, they can thing it’s the video that’s moving

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.

Oh ok but like make it a plain HTML/CSS/JS only slideshow

Oh ok but like make it a real slideshow

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/thumbnails.svg

Oh sorry I was thinking of a plain HTML/CSS/JS slideshow

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.