Split panel slide demo.

In this example below you will see how to do a Split panel slide demo. with some HTML / CSS and Javascript

Click left or right panel to expand to full

Thumbnail
This awesome code was written by Ticolyle, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Ticolyle ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Split panel slide demo.</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

    <div id="header">
    <h1>Panel Demo</h1>
  </div>
  
  <div id="panels-wrap">
   <div id="slide">
    <div id="leftPage" class="panel">
      <h2>Left Page</h2>
      <p>Cable knit dove grey backpack Topshop washed out slipper Weekday. Sneaker luxe white shirt street style tortoise-shell sunglasses rose gold bandeau. White motif cami Prada Saffiano ankle boots Acne. Cara D. Copenhagen 90s cotton grunge envelope clutch parka leggings cashmere.</p>
      <p>Beanie Saint Laurent Lanvin longline dress skirt. Gold collar chignon Céline center part ecru tucked t-shirt minimal beauty ribbed knitwear. Rings Maison Martin Margiela mint knot ponytail print black playsuit denim shorts relaxed. Loafers flats Furla shoe Givenchy Céline Luggage skinny jeans & Other Stories button up leather.</p>
    </div><!--
 --><div id="rightPage" class="panel">
      <h2>Right Page</h2>
      <p>La marinière Superga navy blue oversized sweatshirt cuff leather tote seam Paris. Tea-green LA statement texture crop fluffy sweater vintage Levi shorts plaited neutral denim. Strong eyebrows oversized clutch indigo chambray A.P.C. Hermès Choupette Casio tee powder pink vintage.</p>
      <p>A.P.C. skirt navy blue beanie black cami backpack skirt vintage Levi shorts. Denim dove grey rings tee Jil Sander Vasari loafers cashmere neutral washed out. Cara D. luxe crop la marinière white bandeau envelope clutch. Rose gold texture Furla leather tote denim shorts LA vintage longline chignon Copenhagen.</p>
    </div>
   </div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Ticolyle/split-panel-slide-demo-abdJA */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
/*
#153450, #294052, #447294, #8FBCDB, #F4D6BC, #F8E4CC
*/
body {
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  position:absolute;
  
  background:#8FBCDB;
  font-family: 'Source Sans Pro', sans-serif;
  color:#eaeaea;
}
#header {
  width:100%;
  text-align:center;
  cursor:pointer;
}
#header h1 {
  margin:0;
  padding:0.3em;
}

#panels-wrap {
  position:relative;
  overflow:hidden;
}
#slide {
  position:relative;
  left:-25%;
  width:150%;
}
.panel {
  position:relative;
  display:inline-block;
  width:50%;
  height:100%;
  min-height:800px;
  top:0;
  text-align:center;
  cursor:pointer;
  vertical-align:top;
}
.panel h2 {
  text-shadow: none;
	-webkit-transition: 100ms linear 0s;
	-moz-transition: 100ms linear 0s;
	-o-transition: 100ms linear 0s;
	transition: 100ms linear 0s;
	outline: 0 none;
}
.panel:hover h2, #header h1:hover {
  text-shadow: -1px 1px 40px #ffc, 1px -1px 20px #fff;
}
.panel p {
  max-width:300px;
  text-align:left;
  padding:0.4em 2em;
  margin:0 auto;
}
#leftPage {
  background:#153450;
}

#rightPage {
  background:#447294;
}

/*Downloaded from https://www.codeseek.co/Ticolyle/split-panel-slide-demo-abdJA */
$(function(){
  var miniWidth = 0.15, // 5%
      halfWidth = 0.5,  // 50%
      fullWidth = 0.85; // 100%
  
  $('#leftPage').click(function( e ){
    e.preventDefault();
    $("#slide").animate({left:"0"},"fast");
  }); 
  $('#rightPage').click(function( e ){
    e.preventDefault();
    $("#slide").animate({left:"-50%"},"fast");
  }); 
  
    /*
    $(this).animate({
      width: ($('#panels-wrap').width() * fullWidth)
    },"fast");
    
    $(".panel").not(this).animate({
      right: ($('#panels-wrap').width() * miniWidth)
    },"fast");
    */
  
  $("#header").click(function(e){
    $("#slide").animate({left:"-25%"},"fast");
  });
  
});

Comments