iOS Drag Through Effect with jQuery and Html5

Similar to you drag through objects on an iOS Device (iPhone, iPad ...) at the start screen, the smart jQuery plugin allows you to grab and drag your way through a bunch of pictures of album artwork. It works for both Desktop and Mobile device.

How to use it:

1. Include necessary elements in your head section

<script type="text/javascript" src="//use.typekit.net/vue1oix.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<link rel="stylesheet" type="text/css" href="style.css" />

<script src="jquery.js"></script>
<script src="dragsensitive.jquery.js"></script>

2. Call the plugin

<script>

$(document).ready(function() {

	$('.content').dragSensitive({
	
		// The length of every row. Default is 10 items per row
		rowLength : 10,
		
		// The default width of the box. 
		boxWidth  : 660,
		
		// The default height of the box.
		boxHeight : 500,
		
		// The rate at which grabbing pans across items
		// The default is 1.3. Increasing makes it go slower.
		rate      : 1.3,
		
		// Sets whether or not the UI will snap to the last
		// element when the user stops grabbing
		round     : true,
		
		// This amount a user can drag (in pixels) while still
		// being able to click an object. Usually clicking is
		// disabled on drag, but within a (by default) 20px movement
		// clicking will still be enabled
		mistake   : 20
		
	});

});

</script>

3. CSS

<style type="text/css">
/* THESE ARE THE IMAGES FOR THE ALBUM COVERS */
/* === CHANGE THE URL TO CHANGE THE IMAGE == */


.drag .wrapper:nth-of-type(1) .item:nth-of-type(1) .front {
background: url('images/1.jpg');
}
.drag .wrapper:nth-of-type(1) .item:nth-of-type(2) .front {
background: url('images/2.jpg');
}
.drag .wrapper:nth-of-type(1) .item:nth-of-type(3) .front {
background: url('images/3.jpg');
}
.drag .wrapper:nth-of-type(1) .item:nth-of-type(4) .front {
background: url('images/4.jpg');
}
.drag .wrapper:nth-of-type(1) .item:nth-of-type(5) .front {
background: url('images/5.jpg');
}
.drag .wrapper:nth-of-type(1) .item:nth-of-type(6) .front {
background: url('images/6.jpg');
}
.drag .wrapper:nth-of-type(1) .item:nth-of-type(7) .front {
background: url('images/7.jpg');
}
.drag .wrapper:nth-of-type(1) .item:nth-of-type(8) .front {
background: url('images/8.jpg');
}
.drag .wrapper:nth-of-type(1) .item:nth-of-type(9) .front {
background: url('images/9.jpg');
}
.drag .wrapper:nth-of-type(1) .item:nth-of-type(10) .front {
background: url('images/10.jpg');
}
.drag .wrapper:nth-of-type(2) .item:nth-of-type(1) .front {
background: url('images/11.jpg');
}
.drag .wrapper:nth-of-type(2) .item:nth-of-type(2) .front {
background: url('images/12.jpg');
}
.drag .wrapper:nth-of-type(2) .item:nth-of-type(3) .front {
background: url('images/13.jpg');
}
.drag .wrapper:nth-of-type(2) .item:nth-of-type(4) .front {
background: url('images/14.jpg');
}
.drag .wrapper:nth-of-type(2) .item:nth-of-type(5) .front {
background: url('images/15.jpg');
}
.drag .wrapper:nth-of-type(2) .item:nth-of-type(6) .front {
background: url('images/16.jpg');
}
.drag .wrapper:nth-of-type(2) .item:nth-of-type(7) .front {
background: url('images/17.jpg');
}
.drag .wrapper:nth-of-type(2) .item:nth-of-type(8) .front {
background: url('images/18.jpg');
}
.drag .wrapper:nth-of-type(2) .item:nth-of-type(9) .front {
background: url('images/19.jpg');
}
.drag .wrapper:nth-of-type(2) .item:nth-of-type(10) .front {
background: url('images/20.jpg');
}
.drag .wrapper:nth-of-type(3) .item:nth-of-type(1) .front {
background: url('images/21.jpg');
}
.drag .wrapper:nth-of-type(3) .item:nth-of-type(2) .front {
background: url('images/22.jpg');
}
.drag .wrapper:nth-of-type(3) .item:nth-of-type(3) .front {
background: url('images/23.jpg');
}
.drag .wrapper:nth-of-type(3) .item:nth-of-type(4) .front {
background: url('images/24.jpg');
}
.drag .wrapper:nth-of-type(3) .item:nth-of-type(5) .front {
background: url('images/25.jpg');
}
.drag .wrapper:nth-of-type(3) .item:nth-of-type(6) .front {
background: url('images/26.jpg');
}
.drag .wrapper:nth-of-type(3) .item:nth-of-type(7) .front {
background: url('images/27.jpg');
}
.drag .wrapper:nth-of-type(3) .item:nth-of-type(8) .front {
background: url('images/28.jpg');
}
.drag .wrapper:nth-of-type(3) .item:nth-of-type(9) .front {
background: url('images/29.jpg');
}
.drag .wrapper:nth-of-type(3) .item:nth-of-type(10) .front {
background: url('images/30.jpg');
}
</style>

4. Markup

<div class="content">
<div class="item">
<div class="itemcontent"><a href="http://www.inserthtml.com/">Some Content</a></div>
</div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.