I think this is funny

index.html

<script src="//cdn.jsdelivr.net/g/d3js"></script>

<style>
.deck{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
  }
.slide{
  opacity: .9;
  position: fixed;
  right: 0;
  top: 0;
  height: 100%
}
</style>

<script>
  ;(function(){
    slides = ['ice cream', 'caramel', 'chocolate', 'jimmies']
    var multiplier = 7; // 7percent
    waitforit( slides, multiplier);
  })();
  
  function waitforit(slides, multiplier){
    d3.select('body')
      .append('div')
      .classed({
        deck: true
      })
      .style('background-color','lightblue')
      .style('opacity','.7')
      .select('.slide')
      .data( slides )
      .call( function(s){
         s.enter() //dont forget this baby
          .append('div')
          .classed({
            slide: true
          }) //classed
          .style( 'width', function(d,i){
            return 100 - multiplier*i + '%'; 
          }) //attr
          .style('z-index', function(d,i){
            return i; 
          })
          .style( 'background', function(i){
            return  d3.rgb(randColor(),randColor(),randColor())
                      .toString();
          })//div style
          .each(function(d,i){
            d3.select(this)
              .append('h1')
                .call( function(s){
                   s.append('a')
                    .text( function(d){
                      return d;
                    })
                })
                .style( 'margin-top', function(){
                  return i* multiplier + '%';
                })
          })
      })//call to create sldies
      
    
     d3.selectAll('.slide')
        .each( function(d,i){ 
         var p = d3.select(this);
         d3.select(this)
           .select('a')
           .on('click', function(){ 
              if ( !p.classed( 'docked')){
                 p.classed({
                    docked: true
                  })
                 .transition(1000)
                  .style( 'width', multiplier*( slides.length - i ) + '%')
                    .style( 'margin-top', function(){
                        return i* multiplier + '%';
                      })
                  
              } else {
                 p.classed({
                    docked: false
                  })
                .transition(1000)
                   .style( 'width', function(){
                      return 100 - multiplier*i + '%'; 
                    }) //attr
                    .style( 'margin-top', function(){
                        return 0;
                      });
                
              }
             
           })
       })
  }
  
  function randColor(){
    // random integer between 0,255
    return Math.floor( Math.random() * 256 );
  }
    
</script>