CSS3 vw & vh units, parallax video, ema cc => scroll2play

Some time ago I stumbled on this very nice parallax site of the new Mercedes A-Class. I really liked the effect of playing video while scrolling the browser window. This has inspired me to create a simple and lightweight library that could do something similar. That is why I brought to life scroll2play – a JavaScript lib that mimics video playback while scrolling your browser window.

You can see it in action on its demo page or by scrolling over the iframe below:



While building scroll2play I experimented with a few really fresh features of modern web browsers. The first are viewport relative units of measure vw & vh which allowed me to scale loaded image widths and heights to the size of the viewport. The second is the window.URL.createObjectURL function which creates a URL that is a reference to locally cached blob. In my case blobs were images loaded using XMLHttpRequest. I encourage you to learn more about these new cool features.

Lastly to export a sequence of still images out of my video content I used Adobe Media Encoder CC. You can learn how this can be done by watching my short video tutorial below:



BTW: Below is the complete footage of my friends and me riding on wakeboards 😉



https://outof.me

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>