Created
December 29, 2011 10:11
-
-
Save davidsulc/1533326 to your computer and use it in GitHub Desktop.
First steps with Popcorn.js
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
| <!-- the demo can be found at ap-popcorn-demo.heroku.com --> | |
| <!doctype html> | |
| <html> | |
| <head> | |
| <script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| <style type="text/css"> | |
| /* CSS grid from foundation.zurb.com */ | |
| /* Arfully Masterminded by ZURB */ | |
| /* -------------------------------------------------- | |
| :: Grid | |
| This is the mobile-friendly, responsive grid that | |
| lets Foundation work much of its magic. | |
| -------------------------------------------------- */ | |
| .container { padding: 0 20px; } | |
| .row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; } | |
| /* To fix the grid into a certain size, set max-width to width */ | |
| .row .row { min-width: 0; } | |
| .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; } | |
| .column:first-child, .columns:first-child { margin-left: 0; } | |
| .row .one.columns { width: 4.3%; } | |
| .row .two.columns { width: 13%; } | |
| .row .three.columns { width: 21.68%; } | |
| .row .four.columns { width: 30.37%; } | |
| .row .five.columns { width: 39.1%; } | |
| .row .six.columns { width: 47.8%; } | |
| .row .seven.columns { width: 56.5%; } | |
| .row .eight.columns { width: 65.2%; } | |
| .row .nine.columns { width: 73.9%; } | |
| .row .ten.columns { width: 82.6%; } | |
| .row .eleven.columns { width: 91.3%; } | |
| .row .twelve.columns { width: 100%; } | |
| .row .offset-by-one { margin-left: 13.1%; } | |
| .row .offset-by-two { margin-left: 21.8%; } | |
| .row .offset-by-three { margin-left: 30.5%; } | |
| .row .offset-by-four { margin-left: 39.2%; } | |
| .row .offset-by-five { margin-left: 47.9%; } | |
| .row .offset-by-six { margin-left: 56.6%; } | |
| .row .offset-by-seven { margin-left: 65.3%; } | |
| .row .offset-by-eight { margin-left: 74.0%; } | |
| .row .offset-by-nine { margin-left: 82.7%; } | |
| .row .offset-by-ten { margin-left: 91.4%; } | |
| .row .centered { float: none; margin: 0 auto; } | |
| .row .offset-by-one:first-child { margin-left: 8.7%; } | |
| .row .offset-by-two:first-child { margin-left: 17.4%; } | |
| .row .offset-by-three:first-child { margin-left: 26.1%; } | |
| .row .offset-by-four:first-child { margin-left: 34.8%; } | |
| .row .offset-by-five:first-child { margin-left: 43.5%; } | |
| .row .offset-by-six:first-child { margin-left: 52.2%; } | |
| .row .offset-by-seven:first-child { margin-left: 60.9%; } | |
| .row .offset-by-eight:first-child { margin-left: 69.6%; } | |
| .row .offset-by-nine:first-child { margin-left: 78.3%; } | |
| .row .offset-by-ten:first-child { margin-left: 87%; } | |
| .row .offset-by-eleven:first-child { margin-left: 95.7%; } | |
| /* Source Ordering */ | |
| .push-two { left: 17.4% } | |
| .push-three { left: 26.1%; } | |
| .push-four { left: 34.8%; } | |
| .push-five { left: 43.5%; } | |
| .push-six { left: 52.2%; } | |
| .push-seven { left: 60.9%; } | |
| .push-eight { left: 69.6%; } | |
| .push-nine { left: 78.3%; } | |
| .push-ten { left: 87%; } | |
| .pull-two { right: 17.4% } | |
| .pull-three { right: 26.1%; } | |
| .pull-four { right: 34.8%; } | |
| .pull-five { right: 43.5%; } | |
| .pull-six { right: 52.2%; } | |
| .pull-seven { right: 60.9%; } | |
| .pull-eight { right: 69.6%; } | |
| .pull-nine { right: 78.3%; } | |
| .pull-ten { right: 87%; } | |
| img, object, embed { | |
| max-width: 100%; | |
| /* modified from Foundation */ | |
| /* height: auto; */ | |
| } | |
| img { -ms-interpolation-mode: bicubic; } | |
| /* Nicolas Gallagher's micro clearfix */ | |
| .row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; } | |
| .row:after, .clearfix:after { clear: both; } | |
| .row, .clearfix { zoom: 1; } | |
| /* -------------------------------------------------- | |
| :: Block grids | |
| These are 2-up, 3-up, 4-up and 5-up ULs, suited | |
| for repeating blocks of content. Add 'mobile' to | |
| them to switch them just like the layout grid | |
| (one item per line) on phones | |
| For IE7/8 compatibility block-grid items need to be | |
| the same height. You can optionally uncomment the | |
| lines below to support arbitrary height, but know | |
| that IE7/8 do not support :nth-child. | |
| -------------------------------------------------- */ | |
| .block-grid { display: block; overflow: hidden; } | |
| .block-grid>li { display: block; height: auto; float: left; } | |
| .block-grid.two-up { margin-left: -4% } | |
| .block-grid.two-up>li { margin-left: 4%; width: 46%; } | |
| /* .block-grid.two-up>li:nth-child(2n+1) {clear: left;} */ | |
| .block-grid.three-up { margin-left: -2% } | |
| .block-grid.three-up>li { margin-left: 2%; width: 31.3%; } | |
| /* .block-grid.three-up>li:nth-child(3n+1) {clear: left;} */ | |
| .block-grid.four-up { margin-left: -2% } | |
| .block-grid.four-up>li { margin-left: 2%; width: 23%; } | |
| /* .block-grid.four-up>li:nth-child(4n+1) {clear: left;} */ | |
| .block-grid.five-up { margin-left: -1.5% } | |
| .block-grid.five-up>li { margin-left: 1.5%; width: 18.5%; } | |
| /* .block-grid.five-up>li:nth-child(5n+1) {clear: left;} */ | |
| /* custom rules */ | |
| html { | |
| height: 100%; | |
| } | |
| body { | |
| min-height: 100%; | |
| padding-top: 60px; | |
| background-color: black; | |
| background-image: url(images/logo_ap_white.gif); | |
| } | |
| .content { | |
| background-color: white; | |
| padding: 30px; | |
| } | |
| #video { | |
| width: 360px; | |
| height: 300px; | |
| } | |
| #timeline { | |
| height: 300px; | |
| overflow: atuo; | |
| } | |
| </style> | |
| <script> | |
| // ensure the web page (DOM) has loaded | |
| document.addEventListener("DOMContentLoaded", function () { | |
| var $body = $('body'); | |
| var setDefaultBackground = function(){ | |
| $body.css('background-color', 'black') | |
| .css('background-image', 'url(images/logo_ap_white.gif)') | |
| .css('background-repeat', 'repeat'); | |
| } | |
| // Create a popcorn instance by calling the Youtube player plugin | |
| var video = Popcorn.youtube( | |
| '#video', | |
| 'http://www.youtube.com/watch?v=pvhQPLPhd60' ); | |
| video.timeline({ | |
| start: 6, | |
| target: "timeline", | |
| title: "Salon International de la Haute Horlogerie", | |
| text: "The SIHH is where brands premiere their latest watches, the result of often years of intensive research. The SIHH is also where watchmakers and designers, the representatives of an entire creative team, share their passion for watchmaking one-to-one.", | |
| innerHTML: "Learn more about <a href='http://www.sihh.org'>SIHH</a>", | |
| direction: "up" | |
| }) | |
| .timeline({ | |
| start: 10, | |
| target: "timeline", | |
| title: "Royal Oak Offshore Grand Prix Chronograph", | |
| text: "Reference 26290IO.OO.A001VE.01", | |
| innerHTML: "<a href='http://www.audemarspiguet.com/collections/men/royal-oak-offshore-43/royal-oak-offshore-grand-prix-chronograph-1448/'>More</a>", | |
| direction: "up" | |
| }) | |
| .timeline({ | |
| start: 30, | |
| target: "timeline", | |
| title: "Octavio Garcia", | |
| text: "Design director at Audemars Piguet", | |
| innerHTML: "<a href='http://www.marketwatch.com/story/octavio-garcia-designer-from-the-hood-storms-val%C3%A9e'>Learn more</a>", | |
| direction: "up" | |
| }) | |
| .timeline({ | |
| start: 54, | |
| target: "timeline", | |
| title: "Royal Oak Equation of Time", | |
| text: "Reference 25865BC.OO.1105BC.04", | |
| innerHTML: "<a href='http://www.audemarspiguet.com/collections/men/royal-oak-30/grande-complication-42/royal-oak-grande-complication-61/'>More</a>", | |
| direction: "up" | |
| }) | |
| .timeline({ | |
| start: 95, | |
| target: "timeline", | |
| title: "Royal Oak Offshore Diver", | |
| text: "Reference 15703ST.OO.A002CA.01", | |
| innerHTML: "<a href='http://www.audemarspiguet.com/collections/men/royal-oak-offshore-43/hours-and-minutes-44/royal-oak-offshore-diver-1466/'>More</a>", | |
| direction: "up" | |
| }); | |
| video.loop(true); | |
| // show watch images | |
| video.image({ | |
| start: 10, | |
| end: 18, | |
| src: "images/gp_red.jpg", | |
| target: "watch" | |
| }).image({ | |
| start: 18, | |
| end: 24, | |
| src: "images/gp_blue.jpg", | |
| target: "watch" | |
| }).image({ | |
| start: 24, | |
| end: 29, | |
| src: "images/gp_red.jpg", | |
| target: "watch" | |
| }).image({ | |
| start: 95, | |
| end: 103, | |
| src: "images/diver_watch.jpg", | |
| target: "watch" | |
| }); | |
| // change background colors | |
| video.code({ | |
| start: 10, | |
| end: 29, | |
| onStart: function( options ) { | |
| $body.css('background-image', 'url(images/formula_one.jpg)') | |
| .css('background-repeat', 'no-repeat') | |
| .css('background-position', 'bottom left') | |
| .css('background-attachment', 'fixed'); | |
| }, | |
| onEnd: function( options ) { | |
| setDefaultBackground(); | |
| } | |
| }).code({ | |
| start: 95, | |
| end: 103, | |
| onStart: function( options ) { | |
| $body.css('background-color', '#0077d3') | |
| .css('background-image', 'url(images/diver.jpg)') | |
| .css('background-repeat', 'no-repeat') | |
| .css('background-position', 'bottom right') | |
| .css('background-attachment', 'fixed'); | |
| }, | |
| onEnd: function( options ) { | |
| setDefaultBackground(); | |
| } | |
| }); | |
| // play the video right away | |
| // video.play(); | |
| }, false); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="row"> | |
| <div class="nine columns centered"> | |
| <div class="row content"> | |
| <div class="six columns"> | |
| <div id="video"></div> | |
| </div> | |
| <div class="six columns"> | |
| <div id="timeline"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="nine columns centered"> | |
| <div class="row content"> | |
| <div class="twelve columns"> | |
| <div id="watch"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment