<div class='phone'>
	<div class='onboard'>
		<div class='progress'><div></div></div>
		<ul class='slides'>
			<li class='slide slide1'>
				<i class='fa fa-hand-rock-o'></i>
				<h1>Rock</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum fringilla tortor.</p>
			</li>
			<li class='slide slide2'>
				<i class='fa fa-hand-paper-o'></i>
				<h1>Paper</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum fringilla tortor.r</p>
			</li>
			<li class='slide slide3'>
				<i class='fa fa-hand-scissors-o'></i>
				<h1>Scissors</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elementum fringilla tortor.</p>
			</li>
			<li class='slide slide4'>
				<i class='fa fa-hand-rock-o'></i>
				<i class='fa fa-hand-paper-o'></i>
				<i class='fa fa-hand-scissors-o'></i>
				<form>
					<input type='text' placeholder='E-mail'>
					<button>Play!</button>
				</form>
			</li>
		</ul>
	</div>
</div>
* {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

body {
	background: #525760;
	font-family: 'Roboto', 'San Fransisco', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.phone { background: url('http://matswainson.com/github/iphone.png') no-repeat;
	height: 675px;
	left: 50%;
	margin: -338px 0 0 -200px;
	position: absolute;
	top: 50%;
	width: 400px;
}

.onboard {
	background: white;
	border-radius: 2px;
	cursor: move;
	font-weight: 600;
	height: 424px;
	margin: 128px 0 0 74px;
	overflow: hidden;
	position: relative;
	width: 255px;
}

.slides {
	height: 424px;
	width: 1020px;
}

.slidesAnim {
	-moz-transition: all ease-in-out .2s;
	-ms-transition: all ease-in-out .2s;
	-o-transition: all ease-in-out .2s;
	-webkit-transition: all ease-in-out .2s;
	transition: all ease-in-out .2s;
}

.slide {
	color: #444;
	display: block;
	float: left;
	height: 424px;
	position: relative;
	text-align: center;
	width: 255px;
}

.fa {
	font-size: 72px;
	margin-top: 80px;
	margin-bottom: 10px;
}

.slide4 .fa {
	font-size: 44px;
	margin-top: 120px;
}

.slide4 .fa-hand-paper-o {
	margin-left: 12px;
}

.slide4 .fa-hand-scissors-o {
	margin-left: 8px;
}

h1 {
	font-size: 32px;
	margin-bottom: 10px;
}

p {
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	opacity: .6;
	padding: 0 20px;
}

form {
	margin: 20px;
}

input, button, .skip {
	font-family: 'Roboto', 'San Fransisco', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 800;
}

input {
	border: 0;
	display: block;
	font-size: 16px;
	padding: 10px 0;
	text-indent: 10px;
	width: 100%;
}

input:focus {
	outline: none;
}

.nav {
	bottom: 64px;
	left: 50%;
	position: absolute;
	-moz-transition: all linear .3s;
	-ms-transition: all linear .3s;
	-o-transition: all linear .3s;
	-webkit-transition: all linear .3s;
	transition: all linear .3s;
	z-index: 100;
}

.active-slide--3 .nav,
.active-slide--3 .skip{
	opacity: 0;
	-moz-transform: translateY(60px);
	-ms-transform: translateY(60px);
	-o-transform: translateY(60px);
	-webkit-transform: translateY(60px);
	transform: translateY(60px);
}

.active-slide--3 .nav li:hover,
.active-slide--3 .skip:hover {
	cursor: drag;
}

.nav li {
	background: #fff;
	border-radius: 10px;
	cursor: pointer;
	display: block;
	float: left;
	height: 10px;
	margin: 0 6px;
	opacity: .2;
	-moz-transition: all linear .3s;
	-ms-transition: all linear .3s;
	-o-transition: all linear .3s;
	-webkit-transition: all linear .3s;
	transition: all linear .3s;
	width: 10px;
}

.nav li.active {
	opacity: .4;
}

.skip,
button{
	background: #222;
	border: 0;
	border-radius: 3px;
	box-shadow: inset 0 -1px 0 0 rgba(0,0,0,.9);
	color: #ccc;
	cursor: pointer;
	display: block;
	font-size: 12px;
	padding: 11px 14px;
	text-decoration: none;
	text-transform: uppercase;
	z-index: 2;
}

button {
	display: block;
	padding: 11px 0;
	text-align: center;
	width: 100%;
}

.skip {
	bottom: 12px;
	left: 50%;
	margin-left: -58px;
	position: absolute;
	-moz-transition: all linear .3s;
	-ms-transition: all linear .3s;
	-o-transition: all linear .3s;
	-webkit-transition: all linear .3s;
	transition: all linear .3s;
}

.slide1,
.slide2,
.slide3,
.slide4 {
	color: white;
}

.slide1 {
	background-color: #534c7d;
}
.slide2 {
	background-color: #ab836a;
}
.slide3 {
	background-color: #6170c4;
}
.slide4 {
	background-color: #92bac6;
}

.progress {
	height: 6px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3;
}

.progress div {
	background: rgba(0,0,0,.3);
	height: 10px;
	-moz-transition: all ease-in-out .2s;
	-ms-transition: all ease-in-out .2s;
	-o-transition: all ease-in-out .2s;
	-webkit-transition: all ease-in-out .2s;
	transition: all ease-in-out .2s;
	width: 25%;
}

.active-slide--1 .progress div {
	width: 50%;
}

.active-slide--2 .progress div {
	width: 75%;
}

.active-slide--3 .progress div {
	width: 100%;
}
;
(function($) {

		var $onboard = $('.onboard');
		var $slider = $('.slides');
		var $slides = $('.slide');

		var curIndex = 0;

		function supportsCSS(type) {
				var prefixes = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' ');
				if (type === 'transition') {
						prefixes = 'transition WebkitTransition MozTransition OTransition msTransition'.split(' ');
				}
				for (var i = 0; i < prefixes.length; i++) {
						if (document.createElement('div').style[prefixes[i]] !== undefined) {
								if (type === 'transform') {
										return (prefixes[i] === 'transform') ? prefixes[i] : '-' + prefixes[i].replace('T', '-t').toLowerCase();
								} else if (type === 'transition') {
										return (prefixes[i] === 'transition') ? prefixes[i] : '-' + prefixes[i].replace('T', '-t').toLowerCase();
								}
						}
				}
				return false;
		}

		var cssTransforms = supportsCSS('transform'),
				transformString = '';
		if (cssTransforms) {
				transformString = cssTransforms + ': translate3d(-{{offset}}px, 0, 0); ';
		} else {
				transformString = 'left: -{{offset}}px; ';
		}

		function addNavigation() {
				var navHtml = '<ul class="nav">';
				for (var i = 0; i < $slides.length; i++) {
						navHtml += '<li></li>';
				}
				navHtml += '</ul><a class="skip" href="#">Get started ></a>';
				$onboard.append(navHtml);
				$('.nav').css('marginLeft', '-' + (($slides.length * 22) / 2) + 'px').children().bind('click', function() {
			if (curIndex === 3) {
				return false;
			}
						slide($(this).index());
				}).first().addClass('active');
		}

		function slide(index) {

				curIndex = index;
				var transform = (!index) ? '' : transformString.replace('{{offset}}', (curIndex * 255));
				$slider.attr('style', transform).addClass('slidesAnim');
			setTimeout(function(){ $slider.attr('class', 'slides');
	$onboard.attr('class', 'onboard active-slide--' + curIndex); }, 200);
				$('.nav li').removeAttr('class').eq(curIndex).addClass('active');
				$slider.offset().height;
		}

		function dragSlides() {

				var diff = 0,
						direction,
						origMouseX;

				function dragStart(event) {
						var orig = (event.type === 'mousedown') ? event.originalEvent : event.originalEvent.touches[0];
						origMouseX = orig.pageX;
						$slider.bind('touchmove', dragMove).bind('mousemove', dragMove).bind('mouseleave', dragOff).bind('mouseup', dragOff).bind('touchend', dragOff).bind('touchcancel', dragOff);
				}

				function dragMove(event) {
						var origEv = (event.type === 'touchmove') ? event.originalEvent.touches[0] : event.originalEvent;
						var mouseX = origEv.pageX;
						diff = Math.round(mouseX - origMouseX);
						direction = (diff < 0) ? '<' : '>';
						var offset = Math.abs((curIndex * 255) - diff);
						if (direction === '>' && curIndex === 0 || direction === '<' && curIndex === 3) {
								return;
						}
						$slider.attr('style', transformString.replace('{{offset}}', offset));
				}

				function dragOff(event) {
						var newIndex = (direction === '<') ? curIndex + 1 : curIndex - 1,
								origEv = (event.type === 'touchend' || event.type === 'touchcancel') ? event.originalEvent.changedTouches[0] : event.originalEvent;
						var mouseX = origEv.pageX,
								offset = curIndex * 255;
						diff = Math.round(mouseX - origMouseX);
						$slider.unbind('touchmove', dragMove).unbind('mousemove', dragMove).unbind('mouseleave', dragOff).unbind('mouseup', dragOff).unbind('touchend', dragOff).unbind('touchcancel', dragOff);
						if (direction === '>' && curIndex === 0 || direction === '<' && curIndex === 3) {
								return;
						}
						if (diff > 80 || diff < -80) {
								slide(newIndex);
								return;
						}
						$slider.attr('style', transformString.replace('{{offset}}', offset)).addClass('slidesAnim');
					setTimeout(function(){ $slider.removeClass('slidesAnim'); }, 200);
				}

				$slides.bind('touchstart', dragStart);
				$slides.bind('mousedown', dragStart);

		}

		addNavigation();
		dragSlides();
		$('.skip').bind('click', function(event){
			event.preventDefault();
			if (curIndex === 3) {
				return false;
			}
			slide(3);
		});
		$('form').bind('submit', function(event){
			event.preventDefault();
		});

})(jQuery);
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:300,400,600
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js