তাই। দিন এসেছে। আপনি অবশেষে পাঠ্যের দীর্ঘ স্ক্রলগুলির বিরক্ত হয়ে উঠেছেন এবং একটি নতুন বিন্যাস খুঁজছেন৷ মার্জিত কিছু. কম্প্যাক্ট কিছু. এমন কিছু যা লম্বা স্ক্রলটি নেয়, এটিকে ছোট ছোট আয়তক্ষেত্রে কাটে এবং তাদের একত্রে আবদ্ধ করে। আমি এই আবিষ্কারকে "বই" বলি।
CSS অঞ্চলের শক্তির সাথে ( CanIUse , chrome://flags এ যান এবং CSS Regions সক্ষম করুন) এবং CSS 3D রূপান্তর, আধুনিক ব্রাউজারে অত্যাধুনিক বই প্রযুক্তি অবশেষে উপলব্ধ। আপনার যা দরকার তা হল জাভাস্ক্রিপ্টের কয়েকটি লাইন এবং প্রচুর 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>
এখন যেহেতু আমরা আমাদের বইটি লিখেছি, আসুন সিএসএস ফ্লোকে সংজ্ঞায়িত করি। আমি + অক্ষরটিকে একটি ভেন্ডর প্রিফিক্স প্লেসহোল্ডার হিসাবে ব্যবহার করছি, এটিকে -webkit- ওয়েবকিট ব্রাউজারগুলির জন্য, -moz- ফায়ারফক্সের জন্য, এবং আরও অনেক কিছু দিয়ে প্রতিস্থাপন করছি:
#book-content {
+flow-into: book-text-flow;
}
.book-pages {
+flow-from: book-text-flow;
}
এখন #book-content স্প্যান থেকে বিষয়বস্তু পরিবর্তে .book-pages divs-এ যাবে। যদিও এটি একটি বরং দুর্বল বই। আরো একটি বইয়ের জন্য আমাদের একটি অনুসন্ধান শুরু করতে হবে. আমাদের যাত্রা জাভাস্ক্রিপ্টের ক্লকওয়ার্ক কিংডমে CSS রূপান্তরের রংধনু সেতুর উপর দিয়ে নিয়ে যাবে। মেকানিস্ট ফেইলর্ডদের হলগুলিতে আমরা মহাকাব্য রূপান্তর জাদু প্রকাশ করব এবং ওভারওয়ার্ল্ড ইন্টারফেস নিয়ন্ত্রণ করে এমন কল্পিত তিনটি কী প্রাপ্ত করব।
রংধনু সেতুর অভিভাবক আমাদের আড়ম্বরপূর্ণ কাঠামোগত নির্বাচকদের জ্ঞান প্রদান করে যাতে আমরা আমাদের 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;
}
এইভাবে আমাদের এইচটিএমএল-এর জন্য কিছুটা কাগজ-আকৃতির শৈলী তৈরি করতে, আমরা জাভাস্ক্রিপ্ট রাজ্যের ট্রিলিয়ন-গিয়ারড গেটে পৌঁছেছি। গেট দিয়ে যাওয়ার জন্য, আমাদের অবশ্যই আমাদের ফ্ল্যাট বইটিকে একটি সঠিক আয়তনে পরিণত করতে হবে। বইটিতে কিছু ভলিউম যোগ করতে, আমরা প্রতিটি পৃষ্ঠাকে 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++;
}
};
})();
এর সাথে, আমরা "বুক" প্রযুক্তি অর্জন করেছি এবং ওভারওয়ার্ল্ড ক্রিস্টাল টাওয়ারগুলিকে খালি করতে পারি এবং তাদের অন্ধ ঝলক এবং ওভারওয়ার্ল্ড নেক্সাসের মহান নীল তারকা আচেনারের ভয়ঙ্কর পারমাণবিক আগুনকে পিছনে ফেলে দিতে পারি। আমরা বিজয়ের সাথে আমাদের বাড়িতে ফিরে আসি, আমাদের বইগুলিকে আমাদের মাথার উপরে তুলে ধরে, আমাদের সম্মানে প্যারেড এবং উদযাপনের অনিবার্য ক্যাসকেডের জন্য প্রস্তুত।
আপনি এখানে একটি অনলাইন উদাহরণ দেখতে পারেন এবং উদাহরণগুলির জন্য সম্পূর্ণ উত্স পেতে পারেন। আপনার ব্রাউজারে CSS অঞ্চল না থাকলে, উদাহরণটি বেশ ভাঙা দেখাবে। কোন ক্ষেত্রে আপনি পরিবর্তে এই উদাহরণ চেষ্টা করতে পারেন.