A Cave, 3D Stereo Images & 2-State Looping Animation

When I visited this cave during the trip to the central provinces of Viet Nam. I wanted to capture it magnificence and beauty but the cave's texture was too complex to visualize its depth and space on 2D photos. I recalled this 3D photography technique and tried to take some stereo photos of the scenes (take 2 photos of the same scene from 2 slightly different position) and made them into 3D stereo animation when I get back.

Traditionally, these 3D stereo images are presented by a 2-frame animated GIF. But GIF images are not efficient for live photographs and they normally take up more bytes than JPG for large pictures so I decided to use CSS and JavaScript to reproduce the animation with JPG photos.

Basically, the JPG is set as background of a div which has dimensions of half of the image. JS will shift the background-position at intervals revealing half of the background one at a time. And here's the results.

During the making of the effect, I also explored its possibility with CSS3 animation and steps() function. The result is the same without any coding. But for the sake of compatibility for the audience, the said demo still use JS. I put the CSS3 solution on Dabblet for later reference of similar 2-state animation. Check it out.