ElementStack - Mintik

Mootools için Oskar Krawczyk tarafından geliştirilmiş olan bir eklenti ElementSrack eklentisi. Eklenti ne işe yarar Bence pek bi işe yaramaz ama animasyon türünden çalışmalarla arası iyi olan kullanıcılar için çok nadir bulunan animasyon türlerinden. Çalışma şekli : Sayfanıza eklediğiniz ve düzgün olarak sıralanmış olan resimleriniz tek tıklama ile dağınık bir şekilde arka arkaya sıralanıyor. Hangi resme tıklarsanız geri kalan resimler tıklamış olduğunuz resmin arkasına geçiyor. Bir dahaki tıklamada resimler eski yerlerine marş marş oluyor. Askerlik yapanlar bunu daha iyi anlayacaklardır :)

Download

Demo

Kullanım

Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri :

<script src="mootools-1.2.3-core-nc.js" type="text/javascript" charset="utf-8"></script>
<script src="mootools-1.2.3.1-more.js" type="text/javascript" charset="utf-8"></script>
<script src="ElementStack.js" type="text/javascript" charset="utf-8"></script>

Css :

<style type="text/css" media="screen">

 	 body {

  background: url(darkwoodsx7.jpg);

  font-family: "Georgia", "Times New Roman", serif;

  font-size: .8em;

  color: #fff;

  text-align: center;

  text-shadow: 0 -1px 0 #000;

  }

		a {

  color: #fff;

		}

  h1 {

  font-size: 1.7em;

  line-height: 150%;

			font-weight: normal;

  }

  #wrapper {

  position: relative;

  height: 420px;

  width: 480px;

  margin: 15px auto;

  }

  img {

  position: relative;

  float: left;

  padding: 0;

  margin: 5px;

  -webkit-box-shadow: 0 0 5px #000;

  -moz-box-shadow: 0 0 5px #000;

  border: solid 2px #FFFAF2;

  border-bottom: solid 15px #FFFAF2;

  -webkit-transition: -webkit-transform 0.20s ease-in-out;

  -moz-transition: -moz-transform 0.20s ease-in-out;

  }
</style>

Body etiketleri arasına eklemeniz gereken kısım.

Html :

<div id="wrapper">
<img width="75" height="75" src="img1.jpg" />
<img width="75" height="75" src="img2.jpg" />
<img width="75" height="75" src="img3.jpg" />
<img width="75" height="75" src="img4.jpg" />
<img width="75" height="75" src="img5.jpg" />
<img width="75" height="75" src="img6.jpg" />
<img width="75" height="75" src="img7.jpg" />
<img width="75" height="75" src="img8.jpg" />
<img width="75" height="75" src="img9.jpg" />
<img width="75" height="75" src="img10.jpg" />
<img width="75" height="75" src="img11.jpg" />
 </div>