-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Double pages in turn.js
There are two cases where you might need to add double pages:
- Pages are static imagenes
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%; }
- 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; }