ElementStack

ElementStack

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  :)

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>
Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-02-02 tarihinde yayınlandı,Toplam 2014 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...