Created
August 22, 2013 21:53
-
-
Save alanchrt/6313286 to your computer and use it in GitHub Desktop.
Leap/WebGL Video Wall
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Reinventing Retail</title> | |
| <style> | |
| body { | |
| font-family: Helvetica, Arial, sans-serif; | |
| background: #000; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| video { | |
| display: none; | |
| width: 1024; | |
| height: 1024; | |
| background: #000; | |
| } | |
| video.fullscreen { | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .meta { | |
| display: none; | |
| background: #000000; | |
| padding: 20px 30px; | |
| font-size: 20px; | |
| color: #aaaaaa; | |
| opacity: 0.8; | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| .meta strong { | |
| color: #ffffff; | |
| font-weight: normal; | |
| } | |
| .fullscreen-indicator { | |
| display: none; | |
| position: fixed; | |
| bottom: -85px; | |
| right: 0; | |
| padding: 20px; | |
| background: #000000; | |
| opacity: 0.8; | |
| } | |
| .fullscreen-indicator canvas { | |
| z-index: 10; | |
| } | |
| .icon-fullscreen { | |
| display: none; | |
| position: fixed; | |
| bottom: 60px; | |
| right: 60px; | |
| z-index: 20; | |
| width: 40px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <video width="1024" height="1024" | |
| src="videos/blackberryuk-the_future_of_customer_experience.mp4" | |
| poster="videos/blackberryuk-the_future_of_customer_experience.jpg" | |
| data-title="The Future of Customer Experience" | |
| data-author="Blackberry UK" loop></video> | |
| <video width="1024" height="1024" | |
| src="videos/ciscovid-the_future_of_shopping.mp4" | |
| poster="videos/ciscovid-the_future_of_shopping.jpg" | |
| data-title="The Future of Shopping" | |
| data-author="Cisco" loop></video> | |
| <video width="1024" height="1024" | |
| src="videos/cocacolaresearch-retailing_in_2020.mp4" | |
| poster="videos/cocacolaresearch-retailing_in_2020.jpg" | |
| data-title="Retailing in 2020" | |
| data-author="Coca Cola Research" loop></video> | |
| <video width="1024" height="1024" | |
| src="videos/digitaldazzle-the_future_of_retail.mp4" | |
| poster="videos/digitaldazzle-the_future_of_retail.jpg" | |
| data-title="The Future of Retail" | |
| data-author="Digital Dazzle" loop></video> | |
| <video width="1024" height="1024" | |
| src="videos/leonardodavinci1904-how_we_will_shop.mp4" | |
| poster="videos/leonardodavinci1904-how_we_will_shop.jpg" | |
| data-title="How We Will Shop" | |
| data-author="Unknown" loop></video> | |
| <video width="1024" height="1024" | |
| src="videos/minipcpro-microsofts_concept_of_how_2019_will_look.mp4" | |
| poster="videos/minipcpro-microsofts_concept_of_how_2019_will_look.jpg" | |
| data-title="Concept of 2019" | |
| data-author="Microsoft" loop></video> | |
| <video width="1024" height="1024" | |
| src="videos/motorolasolutions-the_future_of_retail_the_experience_is_everything.mp4" | |
| poster="videos/motorolasolutions-the_future_of_retail_the_experience_is_everything.jpg" | |
| data-title="The Experience Is Everything" | |
| data-author="Motorola Solutions" loop></video> | |
| <video width="1024" height="1024" | |
| src="videos/officevideos-productivity_future_vision_2011.mp4" | |
| poster="videos/officevideos-productivity_future_vision_2011.jpg" | |
| data-title="Productivity Future Vision" | |
| data-author="Microsoft" loop></video> | |
| <video width="1024" height="1024" | |
| src="videos/tescomedia-uks_first_interactive_virtual_grocery_store.mp4" | |
| poster="videos/tescomedia-uks_first_interactive_virtual_grocery_store.jpg" | |
| data-title="UKs First Interactive Virtual Grocery Store" | |
| data-author="Tesco Media U.K." loop></video> | |
| <div class="meta"> | |
| <strong><span class="title"></span></strong> by <span class="author"></span> | |
| </div> | |
| <div class="fullscreen-indicator"> | |
| <input class="knob" data-width="120" data-bgColor="#333333" data-fgColor="#aa3333" data-skin="tron" data-thickness=".1" data-displayInput="false" value="0"> | |
| </div> | |
| <img class="icon-fullscreen" src="fullscreen.svg"> | |
| <script src="js/three.js"></script> | |
| <script src="js/leap.js"></script> | |
| <script src="js/jquery.min.js"></script> | |
| <script src="js/carousel.js"></script> | |
| <script src="js/gestures.js"></script> | |
| <script src="js/jquery.knob.js"></script> | |
| <script> | |
| carousel = new Carousel(document.getElementsByTagName('video')); | |
| carousel.setupScene(); | |
| carousel.animate(); | |
| gestures = new Gestures(carousel); | |
| gestures.start(); | |
| $('.knob').knob(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Videos are overlapping