準備好迎接新的一天了您終於覺得有很長的文字捲動頁面,而想嘗試新的格式。散發優雅的氛圍。出門在外,需要長時間捲動的部分,會切割成數個整齊的小矩形區域,並將它們繫結在一起。我稱之為「書籍」的發明。
強大的 CSS 區域 (CanIUse,前往 chrome://flags
並啟用 CSS 區域) 和 CSS 3D 轉換,先進的書籍技術終於能在新型瀏覽器上取得。而且只需要幾行 JavaScript 和許多 CSS。
首先,定義書籍結構。書籍包含頁面,書頁包含兩面。並在側邊包含書籍內容:
<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>
我們會使用 CSS 區域將書籍文字貼到書籍頁面。首先我們需要書籍文字
<span id="book-content">
blah blah blah ...
</span>
現在,我們已編寫書籍,接下來要定義流程 CSS。我目前使用 + 字元做為供應商前置字元預留位置,並以 -webkit-
(WebKit 瀏覽器) 和 -moz-
(Firefox) 取代,以此類推:
#book-content {
+flow-into: book-text-flow;
}
.book-pages {
+flow-from: book-text-flow;
}
現在,#book-content 時距的內容會改為 .book-pages div。但這本書籍比較好。我們必須完成任務,才能找到更多書本。我們的旅程應引導過 CSS 轉型的彩虹橋,成為 JavaScript 的時鐘之王。在機械手公平的廳堂上,我們必須解放史詩級的轉場魔法,並取得控制整個世界介面的可愛鑰匙。
彩虹橋的監護人體現時尚的結構選取器,讓我們將 HTML 書籍結構變成書形的形式:
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;
}
因此,為了為 HTML 創造某種紙化樣式,我們看到 JavaScript 王國高達 3 億的大門。為了通過這個大門,我們必須將平面書轉變成適量的書冊。如要在書籍中新增音量,我們會在 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)');
}
}
}
})();
施展轉場魔法的效果能令人驚豔公平,並不是每次叫用都不是最困難。然而,結果會使我們書籍頁面添加動畫效果,讓讀者能流暢地讀書。
.book > div {
+transition: 1s ease-in-out;
}
最後,為了使網頁實際轉動,我們必須將事件本身繫結至我們的原因。
(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++;
}
};
})();
透過這種做法,我們成功收購了「圖書」技術,可以疏散全球的水晶塔,在其後無視障和 Achenar 的強力火災 (Achenar) 的外,是全球性課稅關聯的巨大藍色星星。我們歡呼重返家園,將書本擺在最頭上的位置,準備迎接萬聖節的遊行與慶祝活動。
您可以在這裡查看線上範例,並取得完整來源範例。如果瀏覽器沒有 CSS 區域,範例看起來會完全損壞。在這種情況下,您可以改用這個範例。