LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


  • Slide over dude! I need some room to get...

  • I like the way you move All that dancing is making...

  • Slipping, sliding I just can't seem to stay on my

  • Blue is the new black Just get your blues on and get to work.

  • E=mc2 At least that's what I was told to say...

  • Ain't no mountain high enough Ain't no valley low enough...

CSS
@import url("https://fonts.googleapis.com/css?family=Raleway:400,300,600");
.slider-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.slide {
  margin: 0;
  background-color: #fff;
  padding: 1.5em 1em;
  border-bottom: 1px solid #278279;
}

.message {
  white-space: nowrap;
  overflow: hidden;
}

.subject {
  font-weight: bold;
  color: #000;
}

time {
  font-size: .8em;
}

/* RESETS */
body, h1, h2, h3, p {
  margin: 0;
  font-family: Raleway, sans-serif;
  color: #616161;
}

body {
  width: 400px;
  height: 640px;
  margin: 10px auto;
  box-sizing: content-box;
  z-index: 100;
  width: 360px;
  border: 1px solid black;
  border-radius: 60px 60px 30px 30px;
  border: 10px solid #000;
  border-top-width: 60px;
  border-bottom-width: 30px;
}

nav {
  width: 100%;
  height: 60px;
  background: #333;
  text-align: center;
  padding: 10px 0 0;
}

svg {
  margin-top: 5px;
}
JS
var ui_colors = {
  cancel: '#FF0521',
  ok: 	'#00B636'
}

$('.slide').hammer().on('drag', function(event) {
  var offset, zero;
  // Prevent the browser from scrolling on mobile
	event.gesture.preventDefault();
  
  // Calculate where left=0 in relation to the parent
  offset = $('.slider-list').offset();
  zero = offset.left;
    
  $(this).offset({ left: zero + event.gesture.deltaX });

  if( event.gesture.deltaX < 0 ) {
	  $(this).parent().css('background', ui_colors.cancel);
  } else {
	  $(this).parent().css('background', ui_colors.ok);
	}
});

$('.slide').hammer().on('release', function(event) {
  $(this).animate({ left: 0 }, 100, function () {
	  $(this).parent().css('background', '#fff');
  });
});
Host Instantly Drag and Drop Website Builder

 

Description

An implementation of Mailbox's slider function using HTML, CSS and HammerJS.
Term
Wed, 11/29/2017 - 11:19

Related Codes

Pen ID
Pen ID
Pen ID