Jadi, hari itu telah tiba. Anda akhirnya bosan dengan scroll teks yang panjang dan mencari format baru. Sesuatu yang elegan. Sesuatu yang ringkas. Sesuatu yang mengambil scroll panjang, memotongnya menjadi persegi panjang kecil yang rapi, dan mengikatnya menjadi satu. Saya menyebut penemuan ini sebagai "buku".
Dengan kemampuan region CSS (CanIUse, buka chrome://flags dan aktifkan Region CSS) dan transformasi 3D CSS, teknologi buku canggih akhirnya tersedia di browser modern. Yang Anda perlukan hanyalah beberapa baris JavaScript dan banyak sekali CSS.
Mari kita mulai dengan menentukan struktur buku. Buku terdiri dari halaman dan halaman terdiri dari dua sisi. Sisi-sisinya berisi konten buku:
<div class="book">
<div> <!-- first page -->
<div> <!-- front cover -->
# My Fancy Book
</div>
<div> <!-- backside of cover -->
# By Me I. Myself
## 2012 Bogus HTML Publishing Ltd
</div>
</div>
<!-- content pages -->
<div>
<!-- front side of page -->
<div class="book-pages"></div>
<!-- back side of page -->
<div class="book-pages"></div>
</div>
<div>
<div class="book-pages"></div>
<div class="book-pages"></div>
</div>
<div>
<div class="book-pages"></div>
<div class="book-pages"></div>
</div>
</div>
Kita akan menggunakan region CSS untuk mengalirkan teks buku ke dalam halaman buku. Namun, pertama-tama kita memerlukan teks buku.
<span id="book-content">
blah blah blah ...
</span>
Setelah menulis buku, mari kita tentukan CSS alur. Saya menggunakan karakter + sebagai placeholder awalan vendor, ganti dengan -webkit- untuk browser WebKit, -moz- untuk Firefox, dan sebagainya:
#book-content {
+flow-into: book-text-flow;
}
.book-pages {
+flow-from: book-text-flow;
}
Sekarang, konten dari span #book-content akan masuk ke div .book-pages. Namun, buku ini agak buruk. Untuk buku yang lebih mirip buku, kita harus memulai sebuah misi. Perjalanan kita akan melewati jembatan pelangi transformasi CSS ke kerajaan mesin jam JavaScript. Di aula penguasa peri mekanis, kita akan melepaskan sihir transisi epik dan mendapatkan tiga kunci legendaris yang mengontrol antarmuka dunia atas.
Penjaga jembatan pelangi memberi kita kebijaksanaan pemilih struktur yang stylish sehingga kita dapat mengubah struktur buku HTML menjadi bentuk yang lebih berbentuk buku:
html {
width: 100%;
height: 100%;
}
body {
/* The entire body is clickable area. Let the visitor know that. */
cursor: pointer;
width: 100%;
height: 100%;
/* Set the perspective transform for the page so that our book looks 3D. */
+perspective: 800px;
/* Use 3D for body, the book itself and the page containers. */
+transform-style: preserve-3d;
}
.book {
+transform-style: preserve-3d;
position: absolute;
}
/* Page containers, contain the two sides of the page as children. */
.book > div {
+transform-style: preserve-3d;
position: absolute;
}
/* Both sides of a page. These are flat inside the page container, so no preserve-3d. */
.book > div > div {
/* Fake some lighting with a gradient. */
background: +linear-gradient(-45deg, #ffffff 0%, #e5e5e5 100%);
width: 600px;
height: 400px;
overflow: hidden;
/* Pad the page text a bit. */
padding: 30px;
padding-bottom: 80px;
}
/* Front of a page */
.book > div > div:first-child {
/* The front side of a page should be slightly above the back of the page. */
+transform: translate3d(0px, 0px, 0.02px);
/* Add some extra padding for the gutter. */
padding-left: 40px;
/* Stylish border in the gutter for visual effect. */
border-left: 2px solid #000;
}
/* Back of a page */
.book > div > div:last-child {
/* The back side of a page is flipped. */
+transform: rotateY(180deg);
padding-right: 40px;
border-right: 2px solid #000;
}
/* Front cover of the book */
.book > div:first-child > div:first-child {
/* The covers have a different color. */
background: +linear-gradient(-45deg, #8c9ccc 0%, #080f40 100%);
/* Put a border around the cover to make it cover the pages. */
border: 2px solid #000;
/* And center the cover. */
margin-left: -1px;
margin-top: -1px;
}
/* Back cover of the book */
.book > div:last-child > div:last-child {
background: +linear-gradient(-45deg, #8c9ccc 0%, #080f40 100%);
border: 2px solid #000;
margin-left: -1px;
margin-top: -1px;
}
Dengan demikian, kita akan membuat gaya yang agak berbentuk kertas untuk HTML kita, dan kita akan sampai di gerbang kerajaan JavaScript yang memiliki triliunan roda gigi. Untuk melewati gerbang, kita harus mengubah buku datar menjadi volume yang sesuai. Untuk menambahkan beberapa volume ke buku, kita sedikit mengimbangi setiap halaman pada sumbu z.
(function() {
var books = document.querySelectorAll('.book');
for (var i = 0; i < books.length; i++) {
var book = books[i];
var pages = book.childNodes;
for (var j = 0; j < pages.length; j++) {
if (pages[j].tagName == "DIV") {
setTransform(pages[j], 'translate3d(0px, 0px, ' + (-j) + 'px)');
}
}
}
})();
Melakukan sihir transisi untuk mengesankan fairylord bukanlah pemanggilan yang paling sulit. Namun, hasilnya membuat halaman buku kita menganimasikan pergantiannya dengan lancar.
.book > div {
+transition: 1s ease-in-out;
}
Terakhir, agar halaman benar-benar berputar, kita perlu mengikat peristiwa itu sendiri ke tujuan kita.
(function(){
// Get all the pages.
var pages = document.querySelectorAll('.book > div');
var currentPage = 0;
// Go to previous page when clicking on left side of window.
// Go to the next page when clicking on the right side.
window.onclick = function(ev) {
if (ev.clientX < window.innerWidth/2) {
previousPage();
} else {
nextPage();
}
ev.preventDefault();
};
var previousPage = function() {
if (currentPage > 0) {
currentPage--;
// Rotate the page to closed position and move it to its place in the closed page stack.
setTransform(pages[currentPage], 'translate3d(0px,0px,' + (-currentPage) + 'px) rotateY(0deg)');
}
};
var nextPage = function() {
if (currentPage < pages.length) {
// Rotate the page to open position and move it to its place in the opened stack.
setTransform(pages[currentPage], 'translate3d(0px,0px,' + currentPage + 'px) rotateY(-150deg)');
currentPage++;
}
};
})();
Dengan demikian, kita telah memperoleh teknologi "buku" dan dapat mengevakuasi menara kristal dunia atas dan meninggalkan kilau menyilaukan serta api nuklir yang ganas dari Achenar, bintang biru besar di nexus dunia atas. Kita kembali ke rumah dengan penuh kemenangan, sambil mengangkat buku tinggi-tinggi di atas kepala, siap untuk mengikuti parade dan perayaan yang tak terhindarkan untuk menghormati kita.
Anda dapat melihat contoh online di sini dan mendapatkan sumber lengkap untuk contoh tersebut. Jika Anda tidak memiliki Wilayah CSS di browser, contohnya akan terlihat cukup rusak. Dalam hal ini, Anda dapat mencoba contoh ini.