Passcode styled list

index.html

<div id="passes-container" class="container">
  <ul id="passes" class="passes">
    <li class="easyjet">
      <div>
        EasyJet
      </div>
    </li>
    <li class="airberlin">
      <div>
        AirBerlin
      </div>
    </li>
    <li class="ba">
      <div>
        British Airways
      </div>
    </li>
    <li class="ba">
      <div>
        British Airways
      </div>
    </li>
    <li class="easyjet">
      <div>
        EasyJet
      </div>
    </li>
    <li class="airberlin">
      <div>
        AirBerlin
      </div>
    </li>
    <li class="ba">
      <div>
        British Airways
      </div>
    </li>
    <li class="ba">
      <div>
        British Airways
      </div>
    </li>
    <li class="easyjet">
      <div>
        EasyJet
      </div>
    </li>
    <li class="airberlin">
      <div>
        AirBerlin
      </div>
    </li>
    <li class="ba">
      <div>
        British Airways
      </div>
    </li>
    <li class="ba">
      <div>
        British Airways
      </div>
    </li>
  </ul>
</div>

Passcode-styled-list.markdown

Passcode styled list

A sample in HTML/CSS/Javascript showing Passcode style behavior

A Pen by Dimitar Atanassov on CodePen.

License.

script.js

var passes = document.getElementById('passes');
var lis = passes.querySelectorAll('li');
for(var i = 0; i < lis.length; i++){
  lis[i].addEventListener('click', function(e){
    var current = passes.querySelector('.current');
      if(current){
        current.classList.remove('current');
      }
      else{
        e.target.classList.add('current');
      }

      positionPasses();
  });
}

function positionPasses(){
  var currentPassed = false;
  var hasCurrent = passes.querySelector('.current') ? true : false;
  for(var i = 0; i < lis.length; i++){
    var order = i;
    if(lis[i].classList.contains('current')) currentPassed = true;
    
    if(!currentPassed) order += 1;
    
    var offset = (order-1) * 100;
    if(hasCurrent) offset = 260 + (order+1)*40;
    console.log(hasCurrent, i, order, offset);
    //lis[i].innerHTML = offset + '/' + i + '/' + hasCurrent;
    lis[i].style.webkitTransform = 'translate3d(0, {offset}px, 0)'.replace('{offset}', offset);
  } 
}

positionPasses();

style.css

.container{
  width:320px;
  height:568px;
}

.passes{
  width:100%;
  list-style:none;
  padding:0;
  margin:0;
  display:inline-block;
  position:relative;
}

.passes li{
  position:absolute;
  display:inline-block;
  width:100%;
  height:300px;
  border-radius:10px;
  -webkit-box-shadow: 0px -15px 20px 0px rgba(0,0,0,0.27);
  -moz-box-shadow: 0px -15px 20px 0px rgba(0,0,0,0.27);
  box-shadow: 0px -15px 20px 0px rgba(0,0,0,0.27);
  margin:0;
  padding:0;
  overflow:hidden;
  
  -webkit-transition: all .4s ease-out;
}

.passes li.current{
  -webkit-transform:translate3d(0,0,0) !important;
}

.passes li:before, .passes li:after{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  background:rgb(255,255,255);
  border-radius:50%;
  top:30px;
  left:-5px;
}

.passes li:after{
  left:auto;
  right:-5px;
}

.easyjet{
  background:#f60;
  color:#fff;
}

.airberlin{
  background:#cc1f2f;
  color:#fff;
}

.ba{
  background:#031b41;
  color:#fff;
}

.passes li>div{
  font-family:"Helvetica Neue", sans;
  margin-top:10px;
  text-align:center;
  pointer-events: none;
}