Swipe (Tinder-like) UI

index.html

<div class="container">
  <div class="stack">
    <div class="final-message">No more kitten :'(</div>
    <ul>
      <li>
        <div id="card10" class="card js-swiping-card">
          <div class="card-illustration js-lazyload" data-original="https://placekitten.com/g/300/200"></div>
        </div>
      </li>
      <li>
        <div id="card9" class="card js-swiping-card">
          <div class="card-illustration js-lazyload" data-original="https://placekitten.com/g/400/200"></div>
        </div>
      </li>
      <li>
        <div id="car8" class="card js-swiping-card">
          <div class="card-illustration js-lazyload" data-original="https://placekitten.com/g/450/200"></div>
        </div>
      </li>
      <li>
        <div id="card7" class="card js-swiping-card">
          <div class="card-illustration js-lazyload" data-original="https://placekitten.com/g/800/200"></div>
        </div>
      </li>
      <li>
        <div id="card6" class="card js-swiping-card">
          <div class="card-illustration js-lazyload" data-original="https://placekitten.com/g/100/200"></div>
        </div>
      </li>
      <li>
        <div id="card5" class="card js-swiping-card">
          <div class="card-illustration js-lazyload" data-original="https://placekitten.com/g/400/200"></div>
        </div>
      </li>
      <li>
        <div id="card4" class="card js-swiping-card">
          <div class="card-illustration js-lazyload" data-original="https://placekitten.com/g/150/200"></div>
        </div>
      </li>
      <li>
        <div id="card3" class="card js-swiping-card">
          <div class="card-illustration js-lazyload" data-original="http://www.escaledigitale.com/im/team/[email protected]"></div>
        </div>
      </li>
      <li>
        <div id="card2" class="card js-swiping-card">
          <div class="card-illustration js-lazyload" data-original="https://placekitten.com/g/600/200"></div>
        </div>
      </li>
      <li>
        <div id="card1" class="card js-swiping-card">
          <div class="card-illustration js-lazyload" data-original="https://placekitten.com/g/400/200"></div>
        </div>
      </li>
    </ul>
  </div>
  <div class="btn-controls text-center">
    <button type="button" class="btn btn-danger js-left-trigger">
      Ugly kitten
    </button>
    <button type="button" class="btn btn-primary js-right-trigger">
      Atomic kitten
    </button>
  </div>
</div>

script.js

/*
Dependencies:
- jQuery
- Hammer
- jQuery.lazyload
*/

//Lazyload
$('.js-lazyload').lazyload({
  effect: 'fadeIn',
  threshold: 50,
});

//Globals
var $topCard,
  //deltaThreshold is the swipe distance from the initial place of the card
  deltaThreshold = 100,
	deltaX = 0;

function swipeEnded(event, direction, $card) {
	var  directionFactor,
		   transform;
  //If the event has a type, then it is triggered from a button and has a given direction
  if (event.type === 'click') {
    directionFactor = direction === 'right' ? -1 : 1;
  }
  //If the event has a deltaX, then it is triggered from a gesture and has a calculated direction
  else if (event.deltaX) {
    directionFactor = event.deltaX >= 0 ? -1 : 1;
  }
  
	//If the threshold is reached or a trigger clicked, the card is thrown on a side and then disappear
	if ( event.deltaX && deltaX > deltaThreshold || event.deltaX && deltaX < -1 * deltaThreshold || direction) {
		transform = 'translate(' + directionFactor * -100 + 'vw, 0) rotate(' + directionFactor * -5 + 'deg)';
		$card
       .delay(100)
       .queue(function () { 
         $(this).css('transform', transform).dequeue(); 
       })
       .delay(300)
       .queue(function () { 
         $(this).addClass('done').remove(); 
       });
			
     //Do something
		console.log('Swipe done. \nCard:', $card, '\nDirection:', directionFactor);

	}
	//If the threshold isn't reached, the card goes back to its initial place
	else {
		transform = 'translate(0, 0) rotate(0)';
		$card.css({
			'transform': transform,
		});
	}
}

function swipeLeft(event, $card) {
	var transform;
	deltaX = event.deltaX;
	transform = 'translate(' + deltaX * 0.8 + 'px, 0) rotate(5deg)';
  //translate the card on swipe
	$card.css({
		'transform': transform,
	});
}

function swipeRight(event, $card) {
	var transform;
	deltaX = event.deltaX;
	transform = 'translate(' + deltaX * 0.8 + 'px, 0) rotate(-5deg)';
  //translate the card on swipe
	$card.css({
		'transform': transform,
	});
}

//Events
$('.js-swiping-card').each(function(index, element) {
	var $card = $(element),
		//Add hammer events on element
		hammertime = new Hammer(element);
  
  //Mobile gesture
	hammertime.on('panleft swipeleft', function(event) {
		swipeLeft(event, $card);
	});
	hammertime.on('panright swiperight', function(event) {
		swipeRight(event, $card);
	});
	hammertime.on('panend', function(event) {
		swipeEnded(event, false, $card);
	});
});

//Btn controls
$('.js-left-trigger').on('click', function(event) {
  var $topCard= $('.js-swiping-card').last();
  swipeEnded(event, 'left', $topCard);
});
$('.js-right-trigger').on('click', function(event) {
  var $topCard = $('.js-swiping-card').last();
  swipeEnded(event, 'right', $topCard);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>

style.scss

ul {
  padding: 0;
  li {
    list-style: none;
  }
}
.final-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.stack {
  position: relative;
  height: 250px;
  width: 400px;
  max-width: calc(100vw - 60px);
  margin: 50px auto;
}
.card {
  //Style of the card
  height: 250px;
  width: 400px;
  max-width: 100%;
  padding: 30px;
  background: white;
  border: 1px solid grey;
  border-radius: 10px;
  //Position
  position: absolute;
  top: 0;
  left: 0;
  .card-illustration {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: 50% 50%;
    transform: scale(1);
    transition: transform 0.5s;
  }
  &:hover,
  &:focus {
    .card-illustration {
      transform: scale(1.1);
    }
  }
}
//proper style for js mecanism
.js-swiping-card {
  transition: transform 0.5s;
  &.done {
    display: none;
  }
}

/*
@TODO :
- add text animation on cards ?
- add proper behaviour depending on media queries (faster on mobile than on desktop, different size, ...)
*/

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

Swipe (Tinder-like) UI.markdown

Swipe (Tinder-like) UI

A Pen by Bright Sparks on CodePen.

License.