Double pages in turn.js

Jump to bottom Edit New page

blasten edited this page Feb 9, 2012 · 5 revisions

There are two cases where you might need to add double pages:

1. The pages are static images

The solution is CSS Sprites, for example:

Let's say, pages 2 and 3 are only one double page:

.p2{ background-image:url(double-page.jpg); background-position:0% 0%; }

.p3{ background-image:url(double-page.jpg); background-position:-50% 0%; }

2. Using only HTML:

The solution is even more simple, just separate the HTML in two part.

#syllabus div:nth-child(odd) { background-image: -webkit-linear-gradient(left, #fff 95%, #ddd 100%); background-image: -moz-linear-gradient(left, #fff 95%, #ddd 100%); background-image: -o-linear-gradient(left, #fff 95%, #ddd 100%); background-image: -ms-linear-gradient(left, #fff 95%, #ddd 100%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }

#syllabus div:nth-child(even) { background-image: -webkit-linear-gradient(right, #fff 95%, #ddd 100%); background-image: -moz-linear-gradient(right, #fff 95%, #ddd 100%); background-image: -o-linear-gradient(right, #fff 95%, #ddd 100%); background-image: -ms-linear-gradient(right, #fff 95%, #ddd 100%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } #syllabus .cover { background: #333; }