happy mamaday

_.md

[ Launch: mamaday ] 5561688 by enjalot

config.json

{"description":"happy mamaday","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"webfont.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":true,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/xsQOgmR.png"}

index.html

<div class="mom">

  <div class="monkeys image">
    
  </div>
  <div class="text coda"><span>MAMA</span></div>
  
  
  <div class="m-o-m image">
  </div> 
  <div class="text pressstart"><span>MAMA</span></div>
  
  <div class="hearts image">
  </div>
  <div class="text bowlby"><span>MAMA</span></div>
</div>

inlet.js

/*
* Voor Mama
* Met heel veel liefs
* Ian, Nate, Lau
*/
var display = d3.select("#display");
display.select(".mom").style("width", tributary.sw + "px");
var imgw = 400;

var text = "MAMA"

var ianM = "http://i.imgur.com/70fmrhr.jpg";
var nateO = "http://i.imgur.com/4OY2dPc.jpg"; 
var lauM = "http://i.imgur.com/Zv6IzQE.jpg";

var lauhearno = "http://i.imgur.com/gdXKjXw.jpg";
var ianseeno = "http://i.imgur.com/4EUZM55.jpg";
var natespeakno = "http://i.imgur.com/qbLUzm7.jpg";

var nateheart = "http://i.imgur.com/bCX7j67.jpg";
var lauheart = "http://i.imgur.com/I3P6jRJ.jpg";
var ianheart = "http://i.imgur.com/b98HX43.jpg";

var MOM = [ianM, nateO, lauM];
var monkeys = [lauhearno, ianseeno,natespeakno];
var heart = [nateheart, lauheart, ianheart];


var rotate = function(d,i) { return "rotate(90deg); transform-origin: bottom left;" }

var monkeysi = d3.select(".monkeys")
monkeysi
.selectAll("img")
.data(monkeys)
.enter()
.append("img")
.attr({
  src: function(d) { return d },
  width: function(d,i) { 
    if(i === 0) return "px";
    return imgw + "px";
  },
  height: function(d,i) { 
    if(i === 0) return "204px";
    return "px";
  }
})
.style("opacity", function(d,i) { return i === 0 ? 1 : 0 })
.filter(function(d,i) { return i === 0; })
.classed("rotated", true)
.style({
  "margin-left": "74px",
  "margin-top": "20px"
})
monkeysi.each(cycle)


var mom = d3.select(".m-o-m")
mom
.selectAll("img")
.data(MOM)
.enter()
.append("img")
.attr({
  src: function(d) { return d },
  width: function(d,i) { 
    if(i == 2) return "292px";
    return "400px"
  }
})
.style("opacity", function(d,i) { return i === 0 ? 1 : 0 })
.filter(function(d,i) { return i === 2; })
.classed("rotated", true)
.attr("width", "262px")
.style({
  "margin-left": "68px",
  "margin-top": "30px"
})
//.classed("flip", true)
//.classed("inactive", true)
mom.each(cycle);
var heartsi = d3.select(".hearts")
heartsi
.selectAll("img")
.data(heart)
.enter()
.append("img")
.attr({
  src: function(d) { return d },
  width: "400px"
})
.style("opacity", function(d,i) { return i === 0 ? 1 : 0 })
heartsi.each(cycle);

function cycle() {
  d3.select(this).on("mouseover", function(d,i) {
    this.__cycling = true;
  })
  d3.select(this).on("mouseout", function(d,i) {
    this.__cycling = false;
  })
}

var time = 0;
var i = 0;
tributary.run = function(g, t) {
  time += 1;
  if(time / 13 > 1) {
    i = (i+1) % 3;
    time = 0
   
    monkeysi.each(opacity)
    mom.each(opacity)
    heartsi.each(opacity)
    function opacity() {
      if(this.__cycling) {
         d3.select(this).selectAll("img")
          .style("opacity", function(d,j) { 
            if(i === j) return 1;
            return 0;
          })
      }
    }
  }

}

style.css

#display {
  background: #0E0241;
  overflow:scroll;
}
@import url(http://fonts.googleapis.com/css?family=Coda+Caption:800|Bowlby+One+SC|Press+Start+2P);

.mom {
  position:absolute;
  top:10;px
  left: 0;
}
.image {
  margin: 0 auto;
  max-width:400px;
}
.image img {
  position:absolute;
  max-height:260px;
}

.flip {
   animation:flip 2s;
   -moz-animation:flip 2s infinite;
   -webkit-animation:flip 2s infinite;
}
.rotated {
  -webkit-transform: rotate(90deg); transform-origin: bottom left;
  transform: rotate(90deg); transform-origin: bottom left;
}
@keyframes flip {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  
}
@-webkit-keyframes flip /* Safari and Chrome */
{
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
 
}
.monkeys {
  width:400px;
  height: 400px;
  margin-top:10px; 
}

.m-o-m {
  width: 400px;
  height: 400px;
}

.hearts {
  width:400px;
  height: 400px;
  margin-top:-20px;
}



.mom .text {
  color: rgba(240,240,240, 0.5);
  width:400px;
  margin: 0 auto;
  position:relative;
}
.mom .text span {
  position:relative;
  line-height:0;
  top:-72px;
  z-index: 100;
  
  
}
.coda {
  letter-spacing: -58px; 
  font-size: 164px;
  font-family: 'Coda Caption', sans-serif;
  top:-2px;
}
.bowlby {
  letter-spacing: -25px;
  font-size: 125px;
  font-family: 'Bowlby One SC', cursive;
  top:-14px;
}
.pressstart {
  letter-spacing: -26px;
  font-size: 123px;
  font-family: 'Press Start 2P', cursive;
  top: 2px;
}
  

}

webfont.js

WebFontConfig = {
    google: { families: [ 'Coda+Caption:800:latin', 'Bowlby+One+SC::latin', 'Press+Start+2P::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();