CODING
GOOGLE EARTH STREET VIEW ROAD TRIPS

Info

Not great for mobiles. Unlikely to work well at all.

I have a few images on my phone taken with the Google Cardboard Camera app. It works well enough but you look stupid taking the pictures and have to be intelligent in lining them up which spinning on the spot without falling. The final output is a very wide picture which requires a specific app or plugin to create the intended infinite scroll effect.

All the examples I could find had dependencies on other libraries and required so much configuration that I may as well have written one from scratch. I didn't even want to use jQuery, so I didn't.

This is, what I would consider, an ultra-simple method of creating an infinite scollable area. All I do is place the image as a background in a div with an x-repeat and move it left or right. The div gives us freedom of placement and size while allowing us to add content inside for controls or notes such as description text.

The image will scroll infinitely while the mouse is held down. Speed is adjusted by moving the mouse/touch event further from the initial point of click. For size restricted demos ones with floating objects, the scroll should stop when focus is lost.

Although intended solely for desktop, I added touch handlers for mobile and verified functionality on Android. These panoramic images can be very large, so for web demonstrations I've used relatively small files. The downloads have much larger images to give an idea of the final product.

Noting, as ever... I'm not a programmer so don't expect miracles. I needed something and this was what worked for me.


Project Washington

The original video


Project Japan

The orsddsiginal video