Slide like Mailbox

Developer
Hampus Persson
Size
3,758 Kb
Views
30,360
  1. Slide like Mailbox Previews
  2. Slide like Mailbox HTML Codes
  3. Slide like Mailbox CSS Codes
  4. Slide like Mailbox JS Codes

How do I make an slide like mailbox?

An implementation of Mailbox's slider function using HTML, CSS and HammerJS.. What is a slide like mailbox? How do you make a slide like mailbox? This script and codes were developed by Hampus Persson on 13 September 2022, Tuesday.

Slide like Mailbox Previews
IQ Test

Slide like Mailbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slide like Mailbox</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<nav role="navigation"> <svg width="63px" height="40px" viewBox="0 0 206 131" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <path d="M201.298267,124.806395 L203.370896,125.032839 L203.370895,24.5958041 L144.635259,83.5649668 L144.635259,83.5649668 L101.129104,5.71184587 L58.9699245,81.1545874 L58.9699245,81.1545874 L2.63512257,24.5958041 L2.63512152,112.711846 L2.62910361,112.711846 L2.62910361,124.711846 C2.62910361,124.711846 53.9871017,128.288154 104.939429,128.288154 C149.226124,128.288154 193.182082,125.372442 201.298267,124.806395 Z M201.298267,124.806395" id="Triangle-1" stroke="#3BA5E6" stroke-width="5" fill="#3BA5E6" sketch:type="MSShapeGroup"></path> </g> </svg>
</nav>
<section> <ul class="slider-list"> <li class="slide"> <p class="message"><span class="subject">Slide over dude!</span> I need some room to get...</p> <time>2 mins ago</time> </li> <li class="slide"> <p class="message"><span class="subject">I like the way you move</span> All that dancing is making...</p> <time>1 hour ago</time> </li> <li class="slide"> <p class="message"><span class="subject">Slipping, sliding</span> I just can't seem to stay on my</p> <time>Yesterday 13:37</time> </li> <li class="slide"> <p class="message"><span class="subject">Blue is the new black</span> Just get your blues on and get to work.</p> <time>22/10 14:46</time> </li> <li class="slide"> <p class="message"><span class="subject">E=mc2</span> At least that's what I was told to say...</p> <time>23/3 13:33</time> </li>	<li class="slide"> <p class="message"><span class="subject">Ain't no mountain high enough</span> Ain't no valley low enough...</p> <time>2/7 1967</time> </li> </ul>
</section>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/jquery.hammer.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slide like Mailbox - Script Codes CSS Codes

@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;
}

Slide like Mailbox - Script Codes JS Codes

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'); });
});
Slide like Mailbox - Script Codes
Slide like Mailbox - Script Codes
Home Page Home
Developer Hampus Persson
Username hmps
Uploaded September 13, 2022
Rating 3.5
Size 3,758 Kb
Views 30,360
Do you need developer help for Slide like Mailbox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hampus Persson (hmps) Script Codes
Name
The media object
Slider
Notifications
Pretty inputs
Release CLI
Filter list
Pure CSS GitHub ribbon
Inputs with floating labels
JSCSS
Style input placeholders
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!