iOS Drag Through Effect with jQuery and Html5
File Size: | 1.25 MB |
---|---|
Views Total: | 1493 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.