Kinetic.js – Sürüklenebilir çerçeveler oluşturmak

Geçen sene bu vakitlerlde sitemizde Kinetic uygulamasını paylaşmıştık. O zamanlar fazla kurcalamamıştım ve hakkında çerçeve içinde resim sürükleme diye bahsetmiştim. Kinetic ile küçük bir çerçeve içine daha büyük bir çerçeve ekleyerek mouse ile tutup herhangi bir yöne doğru sürükleyebilirsiniz. Genelde websitelerin orta kısmında kullanılan carousel galeri örneklerini bilirsiniz. Mouse ile sağ ve sol taraftaki oklara tıklandığında çerçeve içinde resimler soldan sağa yada sağdan sola doğru kayarlar. Bu gün Kinetik ile böyle bir örnek paylaşmak istedim sizlerle. Herhangi bir zahmet gerekmeden sadece ana çerçeveyi overflow:hidden olarak ayarladıktan sonra çerçevenin içindeki içerikleri (resim, video, yazı vs.) nesneleri sürükleyebilirsiniz. Hatta dilerseniz websitenizin tamamının bile kaydırma çubuğu (scroll) ihtiyacı olmadan mouse ile tutup sürüklenebilmesini sağlayabilirsiniz

Download

Source

Kullanım

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

js adresleri :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.kinetic.min.js" type="text/javascript" charset="utf-8"></script>

Css :

<style type='text/css' media='all'>
html {
 width: 100%;
 height: 100%;
}
body { 
 margin: 0;
 background: -moz-linear-gradient(top, #777, #444);
 background: -webkit-linear-gradient(top, #777, #444);
}
#container {
 width: 95%;
 height: 250px;
 margin: 20px auto;
 padding: 1px;
 background:#333333;
 overflow:hidden;
 display:compact;
 -moz-box-shadow: 0 1px 0 #999, 0 5px 12px rgba(0,0,0,0.9);
 box-shadow: 0 1px 0 #999, 0 5px 12px rgba(0,0,0,0.9);
 border-radius: 3px;
 position:relative;
}
ul.galleryBox {
 width:2510px;
 height:240px;
 position:absolute;
 margin-top:0px;
 margin-left:-40px;
}
ul.galleryBox li{
 width:245px;
 height:240px;
 float:left;
 display:block;
 background-color:#FFFFFF;
 margin: 3px 3px 3px 3px;
 list-style-type: none;
 -webkit-transition: all 0.1s linear;
}

ul.galleryBox li img{
 width:245px;
 height:243px;
 -webkit-transition:0.2s;
 -moz-transition:0.2s;
 -ms-transition:0.2s;
 -o-transition:0.2s;
 transition:0.2s;  
}
ul.galleryBox li:hover img{
  opacity: 0.5;
   -webkit-transition:0.2s;
   -moz-transition:0.2s;
   -ms-transition:0.2s;
   -o-transition:0.2s;
   transition:0.2s;  
}
</style>

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

Html :

<div id="container">	    
	<ul class="galleryBox">
    <li><a href="https://www.mintik.com/?p=14832"><img src="https://lorempixel.com/245/245/sports/1" /></a></li>
    <li><a href="https://www.mintik.com/?p=14832"><img src="https://lorempixel.com/245/245/sports/2" /></a></li>
    <li><a href="https://www.mintik.com/?p=14832"><img src="https://lorempixel.com/245/245/sports/3" /></a></li>
    <li><a href="https://www.mintik.com/?p=14832"><img src="https://lorempixel.com/245/245/sports/4" /></a></li>
    <li><a href="https://www.mintik.com/?p=14832"><img src="https://lorempixel.com/245/245/sports/5" /></a></li>
    <li><a href="https://www.mintik.com/?p=14832"><img src="https://lorempixel.com/245/245/sports/6" /></a></li>
    <li><a href="https://www.mintik.com/?p=14832"><img src="https://lorempixel.com/245/245/sports/7" /></a></li>
    <li><a href="https://www.mintik.com/?p=14832"><img src="https://lorempixel.com/245/245/sports/8" /></a></li>
    <li><a href="https://www.mintik.com/?p=14832"><img src="https://lorempixel.com/245/245/sports/9" /></a></li>
    <li><a href="https://www.mintik.com/?p=14832"><img src="https://lorempixel.com/245/245/sports/10" /></a></li>
    </ul>
</div>

JavaScript :

<script type="text/javascript" charset="utf-8">
   $('#container').kinetic();
</script>