Touchstart

by Marco Abate

HTML

<div class="list">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
</div>

CSS

body {
    margin:inherit;
}

.list {
    width: 100%;
    overflow: hidden;
}

.list .item {
    background: lightgray;
    border-bottom: 1px solid #ffffff;
    padding: 10px;
    transition-timing-function: ease;
    transition-duration: .4;
}

JavaScript

var start;
var moving;

var onTouchStart = $('body').on('touchstart', '.item', function(ev) {
    var e = ev.originalEvent;
    start = e.touches[0].clientX;
});

var onTouchMove = $('body').on('touchmove', '.item', function(ev) {
    var e = ev.originalEvent;
    moving = e.changedTouches[0].clientX;
    var res = start - moving;
    var resPx = 0 - res + 'px';
    var that = $(this);
    that.css({
        transform: 'translateX('+resPx+')',
        MozTransform: 'translateX('+resPx+')',
        WebkitTransform: 'translateX('+resPx+')',
        msTransform: 'translateX('+resPx+')'
    });
});