v12: CSS Cool idea to sort photos

The pilot script. The idea is that when you press two buttons in different ways to sort pictures.

HTML structure will be as follows:


<ul id="stack_yuda" class="stack stack--yuda">
 <li class="stack__item"><img src="img/1.png" alt="Tree 1" /></li>
 <li class="stack__item"><img src="img/2.png" alt="Tree 2" /></li>
 <li class="stack__item"><img src="img/3.png" alt="Tree 3" /></li>
 <li class="stack__item"><img src="img/4.png" alt="Tree 4" /></li>
 <li class="stack__item"><img src="img/5.png" alt="Tree 5" /></li>
 <li class="stack__item"><img src="img/6.png" alt="Tree 6" /></li>
</ul>
<div class="controls">
 <button class="button button--sonar button--reject" data-stack="stack_yuda">
  <i class="fa fa-times"></i>
  <span class="text-hidden">Reject</span>
 </button>
 <button class="button button--sonar button--accept" data-stack="stack_yuda">
  <i class="fa fa-check"></i>
  <span class="text-hidden">Accept</span>
 </button>
</div>

All elements are located completely one on another. By clicking on a particular button will be assigned a class "accept" or "reject".

For this example, a small plug-in was implemented. For animation we used plug dynamics.js by Michael Villar. Including animation using CSS styling.

The plugin works according to the following settings:


Stack.prototype.options = {
 // stack's perspective value
 perspective: 1000,

 // stack's perspective origin
 perspectiveOrigin : '50% -50%',

 // number of visible items in the stack
 visible : 3,

 // infinite navigation
 infinite : true,

 // callback: when reaching the end of the stack
 onEndStack : function() {return false;},

 // animation settings for the items' movements in the stack when the items rearrange
 // object that is passed to the dynamicsjs animate function (see more at http://dynamicsjs.com/)
 // example:
 // {type: dynamics.spring,duration: 1641,frequency: 557,friction: 459,anticipationSize: 206,anticipationStrength: 392}
 stackItemsAnimation : {
  duration : 500,
  type : dynamics.bezier,
  points : [{'x':0,'y':0,'cp':[{'x':0.25,'y':0.1}]},{'x':1,'y':1,'cp':[{'x':0.25,'y':1}]}]
 },

 // delay for the items' rearrangement / delay before stackItemsAnimation is applied
 stackItemsAnimationDelay : 0,

 // Before setting animation group
 stackItemsPreAnimation : {
  reject : {
   elastic : true,
   animationProperties : {},
   animationSettings : {}
  },
  accept : {
   elastic : true,
   animationProperties : {},
   animationSettings : {}
  }
 }
}