HTML, CSS and jQuery

As part of a coding exercise with using scrollStop, I decided to take some spare GoPro footage of me driving and placed them side by side to see the comparisons in landscape. The footage captured me driving uptown from OCADU (on the left) and driving downtown to OCADU (on the right).


As simple as the demo looks, it was a complex process of figuring out the coding and logistics behind making this.

Before I began, I had to figure out a few things - how would I get the GoPro footage into the browser, how to make the images load faster, and how to link the function of scrolling to the images moving. Compressing and converting was simple, I had to import the video into Photoshop and export it by frame - getting every single frame of the video as an image. Then use Windows' command prompt to rename all the files to a standard name.

I realized the images would be too large and would take up a lot of memory to make it work, so I had to make the script use a more compressed image-frame while scrolling and load a more high-res image when the scrolling function stopped. To be able to get this to work, I had to figure out several elements within the scrollStop script to gather a few key data points that allowed me to do this.

The images are essentially placed beside each other, with a frame that crops it so that the view outside the car is split in half (with the footage of going uptown on the left, and downtown on the right). 

Snapshot of the Code

To summarize, I had to make sure every time I scrolled it would generate a number which linked to the image file name - which would then link the scrolling to an image, hence an image would show up every time I scroll depending on how where the scroll bar is.

Using Format