A Pen by Take.

index.html

<div class="container">
  <div class="wrapper">
    <div class="inner page-a">
      <div class="content">
        <h1>page 1</h1>
        <p>右側の黒い部分をクリック or タップしてください。</p>
        <article>
          <h2>Content 1</h2>
          <p>test text</p>
        </article>
        <article>
          <h2>Content 2</h2>
          <p>test text test text test text test text test text test text test text test text test text test text test text test text</p>
        </article>
      </div>
    </div>
    <div id="slide" class="bar"></div>
    <div class="inner page-b">
      <div class="content">
        <h1>page 2</h1>
        <article>
          <h2>Content 1</h2>
          <p>test text</p>
        </article>
        <article>
          <h2>Content 2</h2>
          <p>test text test text test text test text test text test text test text test text test text test text test text test text</p>
        </article>
      </div>
    </div>
  </div>
</div>

script.coffee

$ ->
  $("#slide").click ->
    $elem = $ @
    $elem.parent().toggleClass "second-content"

Slide-Page.markdown

Slide Page

switch 2 pages

A Pen by Take on CodePen.

License.

style.less

body {
  margin: 0;
}

.box-sizing(@val) {
  -moz-box-sizing: @val;
  box-sizing: @val;
}

.container {
  position: fixed;
  width: 100%;
  height: 100%;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.bar {
  position: absolute;
  left: 100%;
  width: 50px;
  height: 100%;
  margin-left: -50px;
  background-color: black;
  z-index: 10;
  transition: left 0.5s;
  cursor: pointer;
}

.inner {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  overflow: hidden;
  z-index: 5;
  transition: left 0.5s;
  .box-sizing(border-box);

  .content {
    height: 100%;
    padding: 5px;
    .box-sizing(border-box);
    overflow-y: scroll;
  }
  
  &.page-a {
    left: -50px;
    padding-left: 50px;
    
    .content {
      background-color: blue;
    }
  }

  &.page-b {
    left: 100%;
    padding-right: 50px;
    
    .content {
      background-color: red;
    }
  }
}

.second-content {
  .bar {
    left: 50px;
  }
  
  .inner {
    &.page-a {
      left: -100%;
    }

    &.page-b {
      left: 50px;
    }
  }
}