È arrivato il giorno. Finalmente ti sei stancato di lunghi testi scorrevoli e stai cercando un nuovo formato. Qualcosa di elegante. Qualcosa di compatto. Qualcosa che prende la lunga barra di scorrimento, la taglia in piccoli rettangoli ordinati e li lega insieme. Ho chiamato questa invenzione "libro".
Grazie alla potenza delle regioni CSS (CanIUse, vai a chrome://flags e attiva le regioni CSS) e alle trasformazioni 3D CSS, la tecnologia di libri all'avanguardia è finalmente disponibile sui browser moderni. Ti bastano poche righe di JavaScript e un sacco di CSS.
Iniziamo definendo la struttura del libro. Il libro è costituito da pagine e le pagine sono costituite da due lati. I lati contengono i contenuti del libro:
<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>
Utilizzeremo le regioni CSS per far scorrere il testo del libro nelle pagine del libro. Ma prima ci serve il testo del libro.
<span id="book-content">
blah blah blah ...
</span>
Ora che abbiamo scritto il nostro libro, definiamo il CSS del flusso. Utilizzo il carattere + come segnaposto per il prefisso del fornitore, sostituiscilo con -webkit- per i browser WebKit, -moz- per Firefox e così via:
#book-content {
+flow-into: book-text-flow;
}
.book-pages {
+flow-from: book-text-flow;
}
Ora i contenuti dello span #book-content verranno inseriti nei div .book-pages. Tuttavia, è un libro piuttosto scadente. Per un libro più letterario dobbiamo intraprendere una ricerca. Il nostro viaggio ci porterà oltre il ponte arcobaleno delle trasformazioni CSS nel regno meccanico di JavaScript. Nelle sale dei signori delle fate meccanici scatenaremo magie di transizione epiche e otterremo le tre chiavi leggendarie che controllano l'interfaccia del mondo sovrano.
Il guardiano del ponte arcobaleno ci impartisce la saggezza di eleganti selettori strutturali per consentirci di trasformare la struttura del libro HTML in una forma più simile a quella di un libro:
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;
}
Creando così uno stile simile a quello di un documento per il nostro codice HTML, arriviamo alle porte del regno di JavaScript, con i suoi miliardi di ingranaggi. Per passare attraverso il cancello, dobbiamo trasformare il nostro libro piatto in un volume adeguato. Per dare un po' di volume al libro, abbiamo spostato leggermente ogni pagina sull'asse 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)');
}
}
}
})();
Eseguire la magia di transizione per impressionare i signori delle fate non è la più difficile delle invocazioni. Tuttavia, i risultati fanno sì che le pagine del nostro libro vengano animate in modo fluido.
.book > div {
+transition: 1s ease-in-out;
}
Infine, per far avanzare le pagine, dobbiamo associare gli eventi stessi alla nostra causa.
(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++;
}
};
})();
In questo modo, abbiamo acquisito la tecnologia del "libro" e possiamo evacuare le torri di cristallo del Sovrappasso e lasciarci alle spalle il loro bagliore accecante e gli ardenti fuochi nucleari di Achenar, la grande stella blu del Nexus del Sovrappasso. Torniamo trionfanti alle nostre case, brandendo i libri sopra la testa, pronti per l'inevitabile cascata di parate e festeggiamenti in nostro onore.
Puoi vedere un esempio online qui e scaricare il codice sorgente completo degli esempi. Se non hai le regioni CSS nel browser, l'esempio sembrerà piuttosto danneggiato. In questo caso, puoi provare questo esempio.