<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="out-box"> <div class="box1"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h2>Sign In</h2> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <br> <p class="lead text-center">If You Want To Create new account Slide Left</p> </div> </div> </div> </div> <div class="box2"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h2>sign up</h2> <form> <div class="form-group"> <label for="exampleInputName">Name</label> <input type="text" class="form-control" id="exampleInputName" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputEmail">Email</label> <input type="email" class="form-control" id="exampleInputEmail" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputPassword3">Confirm Password</label> <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Confirm Password"> </div> <button type="submit" class="btn btn-default ">Submit</button> </form> <br> <p class="lead text-center">If you allready have an account slide right</p> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

.wrapper{ width: 100%; overflow-x: hidden; } .out-box{ width: 200%; position: relative; left: 0; transition: all 0.6s ease; } .box1, .box2{ width: 50%; height: 100vh; transition: all 0.6s 0.2s ease-in-out; padding: 40px; } .box1{ background-color: green; color: #fff; } .box2{ background-color: yellow; position: absolute; top: 0; left: 50%; } .box{ left: -100%; } .ui-loader { display: none; } @media (max-width: 767px) { .box1 ,.box2{ height: auto; } .ui-page{ min-height: auto !important; } }

$('document').ready(function(){ $('.wrapper').on("swipeleft",function(){ $('.out-box').addClass("box"); }); $('.wrapper').on("swiperight",function(){ $('.out-box').removeClass("box"); }); });