My role:
Art Direction / UX Design / UI Design
Visit at:
Year:
2017
Project Intro
Chasing Coral is an awe-inspiring, poignant Netflix Original documentary that tracks the decline of coral reefs, which are vanishing at an unprecedented rate all around the world. A team of divers, photographers and scientists set out on a thrilling ocean adventure to discover why and to reveal the underwater mystery to the world. The movie ends with a striking wake-up call to save a crucial creature in our earth's complex ecosystem. To support this call-to-action, the team behind Chasing Coral asked me to help design an action hub for the movie that would enable and encourage viewers to take action on climate issues
<style>
.video-container { margin: 0 auto 0 !important; max-width: 70% !important; }
.embed-container-noshadow { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; box-shadow: 0 0px 0px 0 rgba(0,0,0,0.0);}
.embed-container-noshadow iframe, .embed-container-noshadow object, .embed-container-noshadow embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='video-container'><div class='embed-container-noshadow'><iframe src='https://player.vimeo.com/video/329674327?autoplay=1&loop=1&autopause=0&background=1&quality=1080p' frameborder='0'></iframe></div></div>
Frontpage Reveal & Subsections
<style>
.video-container { margin: 0 auto 0 !important; max-width: 70% !important; }
.embed-container-noshadow { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; box-shadow: 0 0px 0px 0 rgba(0,0,0,0.0);}
.embed-container-noshadow iframe, .embed-container-noshadow object, .embed-container-noshadow embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='video-container'><div class='embed-container-noshadow'><iframe src='https://player.vimeo.com/video/328308407?autoplay=1&loop=1&autopause=0&background=1&quality=1080p' frameborder='0'></iframe></div></div>
Custom hover effects, immersing the viewer into the context
<style>
.video-container { margin: 0 auto 0 !important; max-width: 70% !important; }
.embed-container { position: relative; padding-bottom: 53.75%; height: 0; overflow: hidden; max-width: 100%; box-shadow: 0 10px 40px 0 rgba(0,0,0,0.15);}
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='video-container'><div class='embed-container'><iframe src='https://player.vimeo.com/video/329669217?autoplay=1&loop=1&autopause=0&background=1&quality=1080p' frameborder='0'></iframe></div></div>
Scrollytelling Page