another isotoper

by sanford

HTML

<div id="capsuleclip">
    <div id="capsulewrap">
    <div class="capsules">
    <div class="capsule one">1</div>
    <div class="capsule one">2</div>
    <div class="capsule one">3</div>
    <div class="capsule one hide">4</div>
    <div class="capsule one">5</div>
    <div class="capsule one">6</div>
    <div class="capsule one">7</div>
    <div class="capsule one">8</div>
    <div class="capsule one hide">9</div>
    <div class="capsule one">10</div>
    <div class="capsule one">11</div>
    <div class="capsule one">12</div>
    <div class="capsule one">13</div>    </div>
</div>
<div>

CSS

body { padding: 100px; }
* { padding: 0; margin: 0; border: 0;  }
#capsuleclip {
    height: 200px;
    width: 200px;
    ZZoutline: black solid 1px;
    ZZoverflow:hidden;
}
#capsulewrap {
    height: 200px;
    width: 308px;
    ZZoverflow: hidden;
    position: relative;
}

.capsules {
    width: 200px;
}
.capsule {
    outline: white solid 1px;
    height: 50px; width: 50px;
    margin-left: 2px;
    float: left;
    color: white;
    text-align: center;
    line-height: 50px;
    position: relative;
    -webkit-transition: all 0ms ease 200ms;

}
.capsule.two {
    background: steelblue;
}
.capsule.one {
    opacity: 1;
    width: 50px;
    border: 0;
    margin: 0;
    border: 0;
    position: relative;
    z-index: 2;
    ZZmargin-left: -50px;
    ZZleft: 50px;
    background: cyan;
}   
#capsuleclip:hover .capsule.hide {
    ZZheight: 4px;
    ZZtop: -10px;
    margin-left: -54px;
    background: gold;
    opacity: 1;
    z-index: 0;
}
#capsuleclip:hover  .capsule {
    -webkit-animation: slipin 1200ms ease-out 100ms;
}
    @-webkit-keyframes slipin{
      from {
      }
      
      50% {
       ZZwidth: 200px;
        margin: 0 -25px;
        opacity: 0;

      }
      
      to {
      }
    }

JavaScript

/*
$$('.capsules')[0].clone().inject('capsulewrap');

$$('.capsules')[0].toggleClass('onstage');
$$('.capsules')[1].toggleClass('offstage');

var restage = function(){
    Array.each([$$('.capsules.onstage')[0], $$('.capsules.offstage')[0]], function(el,idx) {
        el.toggleClass('onstage').toggleClass('offstage');
    })
};

$$('.capsules.offstage .capsule').removeClass('hide'); // reset for new work
$$('.capsules.offstage')[0].getElements('.capsule')[1].toggleClass('hide');
restage.delay(500);

(function(){
    $$('.capsules.offstage .capsule').removeClass('hide'); // reset for new work
    $$('.capsules.offstage')[0].getElements('.capsule')[4].toggleClass('hide');
    restage();
}).delay(2500);

(function(){
    $$('.capsules.offstage .capsule').removeClass('hide'); // reset for new work
    restage();
}).delay(5000);
*/