<p class="btn" id="run">SWIPE RIGHT</p>
<p class="btn" id="reset">SWIPE LEFT</p>
<div class="wrapper width height">
<div class="box width height" id="one"></div>
<div class="box width height" id="two"></div>
<div class="box width height" id="three"></div>
</div>
.width {
width: 300px;
}
.height {
height: 400px;
}
.btn {
background: #ff0000 none repeat scroll 0 0;
border: 2px solid #000000;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
padding: 10px;
text-align: center;
width: 300px;
}
.wrapper {
overflow: hidden;
position: relative;
}
#one {
}
#two {
position: absolute;
-webkit-transform: translate(300px, 0);
-moz-transform: translate(300px, 0);
-ms-transform: translate(300px, 0);
-o-transform: translate(300px, 0);
transform: translate(300px, 0);
top: 0;
left: 0;
}
#two.open {
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
#three {
position: absolute;
-webkit-transform: translate(300px, 0);
-moz-transform: translate(300px, 0);
-ms-transform: translate(300px, 0);
-o-transform: translate(300px, 0);
transform: translate(300px, 0);
top: 0;
left: 0;
}
#three.open {
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
.box {
background-image: url('https://lh5.ggpht.com/33Eh5QGTochJpYi3Xo86xSgqFEmv8oJgl4mIBznu1Q6BW56MFMgVGaBVzwfpnYYlK9w=h900');
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
display: block;
float: left;
padding: 0;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.wrapper.one #one {
-moz-opacity: 0;
opacity: 0;
-moz-transform: scale(0.8);
-webkit-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
$("#run").click(function () {
$('.wrapper').addClass('one');
$('#two').addClass('open');
});
$("#reset").click(function () {
$('.wrapper').removeClass('one');
$('#two').removeClass('open');
});
External CSS
This Pen doesn't use any external CSS resources.