Finger is a microweight swipe script that simulates native physics on touch devices.
As ever so often, we where looking around for a really simple script that does one thing right – enable swiping between pages or images with a true native "feel" to it. There are a lot of swipe scripts around, but most of them feel "off" when swiping and they often add unnecessary CSS rules, desktop browser support, APIs and other stuff that we can do ourself.
Finger adds page-flicking capability to any child element with a true native feel. There are no dependencies – you can use it as is without any library. There is no API or markup/CSS preferences, just a really small script that allows one child element to be swiped in pages based on it’s parent’s size.
It does not add swiping capabilities to mouse-based browsers, only touch events are supported.
We have focused on making the actual interaction as close as the native experience as possible, as well as providing a wide mobile browser support.
We use requestAnimationFrame for the optimal 60fps animation and integrated easing functions without resolving to CSS3 transitions that often distorts the interaction. We also use hardware transitions where possible and added a basic jQuery plugin in the core.
<div id="swipe"> <div class="pages"> <div class="page"></div> <div class="page"></div> </div> </div>
Initializing the script:
// using vanilla JS new Finger(document.getElementById('swipe'), options) // using jQuery $('#swipe').finger(options)
Just a few:
start- sets the starting index (default 0)
duration- sets the animation duration in ms (default 240)
easing- sets the animation easing function, defaults to easeOutQuart
onchange(index)- callback that fires whenever a page is changed.
indexis the new page.
oncomplete(index)- callback that fires whenever a new page is showing and the animation is complete.
indexis the new page.
Test suites right now includes:
- iPhone IOS 5+ Chrome & Safari
- iPad IOS 5+ Chrome & Safari
- Android 4.11+ Safari, Chrome, Opera & Firefox
We plan on including windows phone and older Android versions as soon as posslbe.
License & Demo
No MIT license yet, just GPL as we figure out what we will use this for...
See the included index.html for a simple demo.