Quicksand

by farina

HTML

<script src="https://raw.github.com/razorjack/quicksand/master/jquery.quicksand.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<a class="button" href="#dummy">More warmth!</a>
<div class="shift">

<div class="demo container">
    <div class="colors all">
      <div class="box" id="c463033" style="background: #463033"></div>
      <div class="box" id="c77343d" style="background: #77343d"></div>
      <div class="box" id="ce83f2f" style="background: #e83f2f"></div>
      <div class="box" id="cffc223" style="background: #ffc223"></div>
      <div class="box" id="cffdb59" style="background: #ffdb59"></div>
      <div class="box" id="c788b6f" style="background: #788b6f"></div>
      <div class="box" id="c486a5e" style="background: #486a5e"></div>
      <div class="box" id="c289539" style="background: #289539"></div>
      <div class="box" id="c174876" style="background: #174876"></div>
    </div>
    
    <div class="colors warm">
      <div class="box" id="c62164e" style="background: #62164e"></div>
      <div class="box" id="c86286e" style="background: #86286e"></div>
      <div class="box" id="cda79c2" style="background: #da79c2"></div>
      <div class="box" id="cf39079" style="background: #f39079"></div>
      <div class="box" id="ce83f2f" style="background: #e83f2f"></div>
      <div class="box" id="cffc223" style="background: #ffc223"></div>
      <div class="box" id="cffdb59" style="background: #ffdb59"></div>
      <div class="box" id="cf2c478" style="background: #f2c478"></div>
    </div>
</div>

</div>

CSS

.shift {
  max-width: 200px;
  position:relative;
  left:200px; 
}

.container {
  height: 100px;
  border: 1px solid black;
  overflow: hidden;
  position: relative;
}

.demo .colors {
  overflow: hidden;
  margin: 20px 0;
  padding-left: 55px;
}

.demo .colors div {
  height: 15px;
  margin: 10px;
  border: 5px solid;
}

.demo .warm {
  display: none;
}

.button {
  background-color: #46c5ec;
  color: #282b2e;
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 0;
}

.button:hover,
.button:focus {
  background-color: #ededed;
  color: #282b2e;
}

JavaScript

$(function() {
  $('.button').click(function(e) {
    $('.all').quicksand( $('.warm div.box'), {
      duration: 500,
      attribute: 'id',
      easing: 'easeInOutQuad',
      adjustHeight: 'false'
    });
    e.preventDefault();
  });
});