See the Code - See it Full Page - See Details
In the vein of kinegrams: There is a "Cover" that is a repeating linear gradient of 1px transparent and 5px black. This translates infinitely, either in one direction or alternating, based on the current value of `--direction`. This is the piece that triggers the illusion of movement. Underneath are 6 images, one in each div positioned absolute to stack on top of each other. These are represented in each div as `--background-image`. Each div has a repeating linear gradient on top of the image with a pattern similar to the "cover" except the color is white instead of black, and the starting position for each div's gradient is one pixel different (see the `nth-of-type` rules). Thus for each image we have 1px visible for every 6px horizontally, and each image's visible px starts 1px later than the one before it. When stacked on top of each other, we will only see the last image. When a `mix-blend-mode: multiply` is added to each div, the white bars in each image become transparent, letting the other images show through. You can see the resulting image by unchecking "Animate". Thanks to the white bars and blend mode, you can replace the six frame images (each div's `--background-image` property) without needing to do any processing to create the image, making this fairly dynamic. For quick tests you can try different linear gradients or radial gradients. If you have individual images that are fixed dimensions, you can change the `--w` and `--h` properties... or if it is in a sprite you can additionally use background-position for each `nth-of-type` rule. BONUS: Accelerometer supported when your device has it ... caveat is that on iOS iframes do not allow reading device motion info. So you will need to open this [outside the CodePen framing](https://s.codepen.io/danwilson/debug/GmwjYp) And as usual... after I did this I happened upon someone else doing this (Gregor Adams). This version (from three years ago) uses `background-clip: text` to achieve the pattern effect instead of `mix-blend-mode` https://codepen.io/pixelass/pen/cElxz
This Pen uses: HTML, CSS, JavaScript, and