Skip to content

Instantly share code, notes, and snippets.

@davidsulc
Created December 29, 2011 10:11
Show Gist options
  • Save davidsulc/1533326 to your computer and use it in GitHub Desktop.
Save davidsulc/1533326 to your computer and use it in GitHub Desktop.
First steps with Popcorn.js
<!-- 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