jefBinomed

// First I load the 'sprites'
loadSprites([
    {title:'logos', url: 'imgs/logos.svg'},
    {title:'spaceship', url: 'imgs/spaceship.png'}
]).then(function(){
    // When the sprites are load, I start multiples 'intervals'

    // One for the music
    nextSong();
    // One that display the grid, the space ship, ... (based on requestAnimationFrameRate)

jefBinomed

mapLogos = [
    [
        {id:'photos',pos:{x:2,y:0},index:{row:0,col:0}, visible:true},
        {id:'gplus',pos:{x:3,y:0}, index: {row:0,col:1}, visible:true},
        {id:'music',pos:{x:4,y:0}, index: {row:0,col:2}, visible:true},
        {id:'maps',pos:{x:5,y:0}, index: {row:0,col:3}, visible:true},
        {id:'calendar',pos:{x:6,y:0}, index: {row:0,col:4}, visible:true},
        {id:'keep',pos:{x:7,y:0}, index: {row:0,col:5}, visible:true},
        {id:'glass',pos:{x:8,y:0}, index: {row:0,col:6}, visible:true},
        {id:'android',pos:{x:9,y:0}, index: {row:0,col:7}, visible:true},

jefBinomed

positionLogos = {
    'photos' : {x : 400, y :430},
    'gplus' : {x : 720, y :440},
    'music' : {x : 1010, y :440},
    'maps' : {x : 1320, y :440},
    'calendar' : {x : 400, y :730},
    'keep' : {x : 720, y :730},
    'glass' : {x : 1010, y :730},
    'android' : {x : 1320, y :720},
    'compute' : {x : 400, y :1000},

jefBinomed

context = canvas.getContext('2d');
context.drawImage(imgSource //Source image
, sx //sx clipping of source image
, sy //sy clipping of source image
, sw // swidth clipping of source image
, sh // sheight clipping of source image
, dx // x coordinate of drawing on canvas
, dy // y coordinate of drawing on canvas
, dw // width size of the drawing
, dh // height size of the drawing

jefBinomed

<marquee behavior="scroll" direction="right" class="marquee_1">DevFest Nantes</marquee>
<marquee behavior="scroll" direction="right" class="marquee_2">DevFest Nantes</marquee>

marquee_1.style.display = 'none';
marquee_2.style.display = 'none';
// The text "DevFest Nantes" takes 2500ms to go through the marquee
setTimeout(function() {
    marquee_1.style.display = '';
    setTimeout(function() {
        marquee_2.style.display = '';

jefBinomed

// Parent container
.conteneur{
  ...
  perspective : 500px;
}

// Numbers (left column)
.min.chiffre{
  top: 280px;
  left: 132px;

jefBinomed

<div class="conteneur">
    <!-- Minutes Number (Left Column)-->
    <div class="jaune_clair min chiffre" id="min">00</div>
    <!-- Minutes Unit (Right Column)-->
    <div class="jaune_fonce min unit">m</div>

    <!-- Seconds Number (Left Column)-->
    <div class="jaune_clair sec chiffre" id="sec">00</div>
    <!-- Seconds Unit (Right Column)-->
    <div class="jaune_fonce sec unit">s</div>

jefBinomed

// Index of the current song in the playlist
var indexPlaylist = 0;
// The playlist of songs to play
var playListSongs = [
    'The_Spin_Wires_-_Blackout_Romeo.mp3'
];

// Load the song in parameter and play it
function playSound(url){
    audioElt.pause();

jefBinomed

var cibleDate = Date.parse('2014-11-07T08:35:00Z')
var cancelInterval = setInterval(function() {
    currentTime += 100;
    var deltaTime = cibleDate - currentTime;
    var tmpDate = new Date(deltaTime);
    min.innerHTML = tmpDate.getMinutes() < 10 ? "0"+tmpDate.getMinutes() : tmpDate.getMinutes();
    sec.innerHTML = tmpDate.getSeconds() < 10 ? "0"+tmpDate.getSeconds() : tmpDate.getSeconds();
    manageSoundVolume(deltaTime);
    if (deltaTime <= 0 ){
        endCountDown();

jefBinomed