Demo: Parallax Image Overlay
Demo project for the Parallax module. Simulates depth in a 2D image by splitting it into layers and moving those layers at different speeds.
Demo project for the Parallax module. Simulates depth in a 2D image by splitting it into layers and moving those layers at different speeds.
https://www.audubon.org/sites/default/files/boa_plates/plate-321-roseate-spoonbill.jpg
Instructions
- Locate bird image
- Swipe left/right and up/down to move image layers
Features
- Parent & child entity framework
- Parent "frame" entity computes set of values once (x and y offset)
- Child "layer" entities receive values and update to match
- Simple front-end interface
- Programmatically adding entity
- Frame entity adds custom border that blocks layers from overshooting image bounds
- Full image masking
- Image target is subset of full image
- Reconstructs size of full image from image target metadata
- Custom geometry & primitives
- Custom "frame" geometry places invisible rectangular frame around image
Other Work by Northwestern-MTI
