Book Page Slide Reading Interface

by kidino

HTML

<a href="#" id="prev" title="previous">prev</a>
<a href="#" id="next" title="next">next</a>

<p id="info"> <span id="pages"></span>

</p>
<div id="bookwrapper">
  <div id="bookcontent">
    <p><span class="drop">P</span>1orem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus turpis lacus, ac accumsan quam lacinia ac. Quisque in leo magna. Nunc ut massa ut arcu fringilla dapibus. Ut orci nisi, pharetra vel metus at, vehicula
      pretium lorem. Duis vitae orci nec erat dapibus venenatis. Integer velit tellus, vulputate at enim vel, feugiat pulvinar sem. Cras mattis dignissim tellus sit amet consectetur. Maecenas vitae pharetra mi. Praesent in nisl vitae risus sollicitudin
      tempus. Donec malesuada velit dui. Maecenas eros sapien, condimentum eget lacinia quis, tincidunt in velit. Donec ultricies dolor sed dolor luctus venenatis. In faucibus sed lacus nec volutpat.</p>
    <p>Donec rutrum vel turpis at porttitor. Aenean ullamcorper feugiat diam, at bibendum elit dapibus a. Maecenas gravida nisi sed nibh consequat suscipit. Pellentesque auctor sollicitudin arcu. Sed vehicula nulla ac felis tincidunt facilisis. Proin porttitor
      turpis libero, sed mattis dolor egestas eget. Phasellus ac congue est, id vestibulum odio. Nulla mauris leo, ornare in orci sit amet, placerat ornare ipsum. Aenean tempus, neque ut viverra tincidunt, leo velit suscipit elit, vel aliquam leo turpis
      non leo. Fusce id eros nec nulla ullamcorper mollis. Etiam diam est, sagittis at faucibus non, iaculis quis massa. Fusce eleifend tempor enim, at porttitor orci tempor vel. Integer congue neque magna, vel suscipit nisi placerat id.</p>
    <p>Nunc ligula magna, blandit tincidunt arcu non, cursus mattis eros. Pellentesque cursus, massa sed feugiat dapibus, odio augue tempor nibh, ac semper erat urna nec orci. Nunc eget pulvinar odio. Curabitur congue, arcu in scelerisque sodales, velit
      mauris mattis urna, ac rhoncus velit risus venenatis sem. Aliquam tempus dictum...

CSS

.drop {
  font-size: 4.8em;
  line-height: 1em;
  margin: 0px;
  padding: 0px;
  float: left;
  margin-right: 5px;
  margin-bottom: 3px;
  padding: 0px 5px;
  background-color: #ccc;
  margin-top: 1px;
}

body {
  background-color: #fff;
}

* {
  box-sizing: border-box;
}

#bookwrapper {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  margin: auto;
}

#bookcontent {
  width: 1px;
  display: inline-block;
  font-family: serif;
}

a {
  position: absolute;
  top: 0px;
  width: 30px;
  height: 100%;
  background-color: #f0f0f0;
  text-indent: -9999px;
}

a:hover {
  background-color: #ddd;
}

#prev {
  left: 0px;
}

#next {
  right: 0px;
}

#info {
  text-align: center;
  width: 100%;
  color: #aaa;
}

p {
  color: #333;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 15px;
}

JavaScript

var colheight = window.innerHeight - 100;
var colgap = 30;
var colwidth = (window.innerWidth - colgap - 100) / 2;
var colgap1 = colwidth + colgap;
var slidegap = colwidth * 2 + colgap * 2;

$('#bookwrapper').width(slidegap - colgap);
$('#bookwrapper').height(colheight);

$('#bookcontent').height(colheight);
$('#bookcontent').css('-webkit-column-width', colwidth + 'px');
$('#bookcontent').css('-webkit-column-gap', colgap + 'px');
$('#bookcontent').css('column-width', colwidth + 'px');
$('#bookcontent').css('column-gap', colgap + 'px');

var el = document.getElementById("bookcontent");

var contentwidth = (Math.ceil((el.scrollWidth + colgap) / colgap1) * colgap1) - colgap;

var thispage = 1;

$('#bookcontent').width(contentwidth);

$('#bookcontent').css('position', 'absolute');
var lastpage = Math.ceil(el.scrollWidth / slidegap);

dopage();

$('#prev').click(function() {
  thispage--;
  if (thispage < 1) {
    thispage++;
  } else {
    $('#bookcontent').animate({
      left: "+=" + slidegap + "px"
    }, 500);
    dopage();
  }
});

$('#next').click(function() {
  thispage++;
  if (thispage > lastpage) {
    thispage--;
  } else {
    $('#bookcontent').animate({
      left: "-=" + slidegap + "px"
    }, 500);
    dopage();
  }
});

function dopage() {
  $("#pages").html(thispage + "/" + lastpage);
}