Jquery Isotope ile Animasyonlu Nesne Değişimi

Jquery Isotope ile Animasyonlu Nesne Değişimi

Bu dersimizde Jquery Isotope kütüphanesi ile nesneleri animasyonlu bir şekilde değiştirmeyi görelim..

Merhaba arkadaşlar bu örneğimizde Jquery ' nin Isotope kütüphanesini kullanarak güzel bir örnek yapacağız.

Bu örnek hemen hemen her site için kullanılabilir.Biz kişisel sitemiz için yaptığınız referansları gösteren bir örnek yapıyoruz.Çok farklı şekillerdede bu örnek kullanılabilir.Fazla uzatmadan kodlara geçelim.

 

Önce JQuery ve İsotope js lerimizi projemize ekleyerek başlayalım.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

 

Daha sonra html yapımızda bir tab ve icerik oluşturacağız.

 

<div class="ana-div">
<div class="nav">
  <ul>
    <li class="active" data-filter="*">Hepsi</li>
    <li data-filter=".front">Front-End</li>
    <li data-filter=".back">Back-End</li>
    <li data-filter=".psd">Psd</li>
  </ul>
  </div>
  <div class="icerik">
    <div class="item front">
    <img src="http://www.eventmanagerblog.com/wp-content/uploads/2014/03/creating-perfect-event-websites.png" alt="" />
    </div>
    <div class="item back">
    <img src="http://www.parakazanmak.net/wp-content/uploads/2016/07/web-site.jpg" alt="" />
    </div>
    <div class="item psd">
    <img src="http://www.vivedesigns.com/wp-content/uploads/2012/12/mackbook_pro_mock_up_4.jpg" alt="" />
    </div>
    <div class="item front">
    <img src="http://capitolmediasolutions.com/wp-content/uploads/2014/03/Depositphotos_18177425_original.jpg" alt="" />
    </div>
    <div class="item back">
    <img src="http://newviewpr.com/wp-content/uploads/2014/11/Responsive_Website_Design.jpg" alt="" />
    </div>
    <div class="item psd">
    <img src="http://www.reklammaster.com/wp-content/uploads/web-tasar%C4%B1m%C4%B1.jpg" alt="" />
    </div>
    <div class="item back front">
    <img src="https://i.ytimg.com/vi/sd0grLQ4voU/maxresdefault.jpg" alt="" />
    </div>
    <div class="item psd front">
    <img src="http://www.tracewatch.com/wp-content/uploads/2016/03/san-francisco-bay-area-website-design-1000.jpg" alt="" />
    </div>
    
  </div>
</div>

 

Burada iceriklerde referanslarımız yani resimler , nav kısmında ise tab menümüz bulunmakta. nav class ımızın içindeli li lerde bulunan data-filter ' lar bizim iceriğimizi gruplandıracağımız isimler.data-filter lara isim veriyoruz ve aşağıda item ' lara verdiğimiz classlar ile hangi nesnenin hangi sekmede görüneceğini belirliyoruz.

 

Şimdide şık bir görünüm için Css lerimizi yazalım

.clr {
  clear: both
}

ul {
  list-style: none;
  li {
    cursor: pointer;
    float: left;
    padding: 10px;
    border: 1px solid #c8c8c8;
    transition: background-color .3s ease-in-out;
    &:hover {
      background-color: #c6c6c6;
    }
  }
  .active {
    background-color: #c6c6c6;
  }
}

.icerik {
  .item {
    margin-top: 70px;
    img {
      width: 300px;
      height: 200px;
      float: left;
      padding: 10px
    }
  }
}

 

Css ' imizde bu şekilde.Ben Scss şeklinde yazdım.Bu şekilde anlaşılmassa yorumdan yazabilirsiniz.

Şimdi de JS kodlarımıza geçelim.

 

/* İsotope çalıştırdık */

$(".ana-div").isotope({
  itemSelector: '.item' ,
  layoutMode : 'fitRows'
});

/* Tıklanan Nesneye(li ye) arkaplan verdik */

$(".nav ul li").click(function(){
  $(".nav ul li").removeClass("active");
  $(this).addClass("active");


/* İsotope işlemini gerçekleştirdik */

var selector = $(this).attr("data-filter");
$(".ana-div").isotope({
  filter : selector
});
return false ;
});

 

Böylece örneğimizi bitirmiş olduk.Javascripti açıklama satırları ile yazdım.Umarım anlaşılırdır.

Ayrıca sıkıntı yaşanlar olduysa kodun tamamı aşağıdaki gibidir

 

<html>
<body>

<title>İsotope Uygulaması</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

<style>

.clr {
  clear: both
}

ul {
  list-style: none;
  }
  ul li {
  cursor: pointer;
    float: left;
    padding: 10px;
    border: 1px solid #c8c8c8;
    transition: background-color .3s ease-in-out;
}
li:hover {
      background-color: #c6c6c6;
  }
  .active {
    background-color: #c6c6c6;
  }

  .item {
    margin-top: 70px;
  }
    .item img {
      width: 300px;
      height: 200px;
      float: left;
      padding: 10px
    }



</style>

<div class="ana-div">
<div class="nav">
  <ul>
    <li class="active" data-filter="*">Hepsi</li>
    <li data-filter=".front">Front-End</li>
    <li data-filter=".back">Back-End</li>
    <li data-filter=".psd">Psd</li>
  </ul>
  </div>
  <div class="icerik">
    <div class="item front">
    <img src="http://www.eventmanagerblog.com/wp-content/uploads/2014/03/creating-perfect-event-websites.png" alt="" />
    </div>
    <div class="item back">
    <img src="http://www.parakazanmak.net/wp-content/uploads/2016/07/web-site.jpg" alt="" />
    </div>
    <div class="item psd">
    <img src="http://www.vivedesigns.com/wp-content/uploads/2012/12/mackbook_pro_mock_up_4.jpg" alt="" />
    </div>
    <div class="item front">
    <img src="http://capitolmediasolutions.com/wp-content/uploads/2014/03/Depositphotos_18177425_original.jpg" alt="" />
    </div>
    <div class="item back">
    <img src="http://newviewpr.com/wp-content/uploads/2014/11/Responsive_Website_Design.jpg" alt="" />
    </div>
    <div class="item psd">
    <img src="http://www.reklammaster.com/wp-content/uploads/web-tasar%C4%B1m%C4%B1.jpg" alt="" />
    </div>
    <div class="item back front">
    <img src="https://i.ytimg.com/vi/sd0grLQ4voU/maxresdefault.jpg" alt="" />
    </div>
    <div class="item psd front">
    <img src="http://www.tracewatch.com/wp-content/uploads/2016/03/san-francisco-bay-area-website-design-1000.jpg" alt="" />
    </div>
    
  </div>
</div>


<script>
/* İsotope çalıştırdık */
$(".ana-div").isotope({
  itemSelector: '.item' ,
  layoutMode : 'fitRows'
});

/* Tıklanan Nesneye(li ye) arkaplan verdik */

$(".nav ul li").click(function(){
  $(".nav ul li").removeClass("active");
  $(this).addClass("active");


/* İsotope işlemini gerçekleştirdik */

var selector = $(this).attr("data-filter");
$(".ana-div").isotope({
  filter : selector
});
return false ;
});
</script>



</body>
</html




 

Bu örneğimizde bu kadar.Anlaşılmayan yerler veya düzeltmeler için yorum atabilirsiniz.

Selim Hamzaoğulları
Sakarya üniversitesi Bilgisayar Mühendisliği Bölümü mezunuyum.Lise yıllarımdan bu yana yazılımla özellikle Web tarafında Front-end ile uğraşıyorum.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git