ถึงเวลาแล้ว ในที่สุดคุณก็เบื่อหน่ายกับการต้องอ่านข้อความยาวๆ และมองหารูปแบบใหม่ บางอย่างหรูหรา สิ่งที่กะทัดรัด บางอย่างที่ต้องใช้การเลื่อนยาวๆ มาตัดเป็นสี่เหลี่ยมผืนผ้าเล็กๆ อย่างประณีต แล้วรวมไว้ด้วยกัน ฉันเรียกสิ่งประดิษฐ์นี้ว่า "หนังสือ"
ประสิทธิภาพภูมิภาคของ CSS (CanIUse) ไปที่ chrome://flags
และเปิดใช้ CSS Regions) และการแปลงแบบ 3D ของ CSS ในที่สุดเทคโนโลยีหนังสือที่ทันสมัยก็พร้อมใช้งานในเบราว์เซอร์สมัยใหม่ คุณต้องมี JavaScript ไม่กี่บรรทัดและ CSS จำนวนมาก
เริ่มต้นด้วยการกำหนดโครงสร้างหนังสือ หนังสือประกอบด้วยหน้าต่างๆ และซึ่งประกอบด้วย 2 ด้าน ด้านข้างมีเนื้อหาหนังสือดังนี้
<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 จะไปที่ div หน้า .book แทน หนังสือเล่มนี้เป็นหนังสือที่ค่อนข้างแย่ สำหรับหนังสือแนวนี้ เราต้องออกผจญภัยกัน การเดินทางของเราจะนำไปสู่สะพานสายรุ้งของ CSS ที่เปลี่ยนไปเป็นอาณาจักรแห่งนาฬิกาของ JavaScript ในห้องโถงของนางฟ้าช่างยนต์ เราจะปลดปล่อยพลังเวทมนตร์แห่งการเปลี่ยนผ่านอันยิ่งใหญ่และเก็บคีย์ในตำนาน 3 อันที่ควบคุมอินเทอร์เฟซในระดับโลก
ผู้พิทักษ์ของสะพานสายรุ้งบอกเล่าเรื่องราวเกี่ยวกับตัวเลือกโครงสร้างที่มีสไตล์แก่เราเพื่อที่เราจะได้เปลี่ยนโครงสร้างหนังสือ 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 เราต้องเปลี่ยนหนังสือธรรมดาๆ ให้เป็นเล่มที่เหมาะสมจึงจะผ่านประตูได้ ในการเพิ่มปริมาณในหนังสือ เราจะออฟเซ็ตแต่ละหน้าเล็กน้อยบนแกน 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 ดวงดาวสีน้ำเงินที่ยิ่งใหญ่ของจุดกำเนิดโลกเหนือโลก เรากลับไปยังบ้านเกิดอย่างมีชัย ยกหนังสือขึ้นมาอย่างเหนือศีรษะ พร้อมรับขบวนพาเหรดและการเฉลิมฉลองเพื่อเกียรติยศอย่างหลีกเลี่ยงไม่ได้
คุณสามารถดูตัวอย่างทางออนไลน์ได้ที่นี่ และดูแหล่งข้อมูลแบบเต็มสำหรับตัวอย่าง หากคุณไม่มี CSS Regions ในเบราว์เซอร์ ตัวอย่างอาจไม่สมบูรณ์ ในกรณีนี้ ให้ลองใช้ตัวอย่างนี้แทน