כתיבת ספר ניתן להיפוך באמצעות אזורי CSS ושינויי תלת ממד

Ilmari Heikkinen

אז. היום הגיע. נמאס לכם לגלול טקסטים ארוכים ואתם מחפשים פורמט חדש. משהו אלגנטי. משהו קומפקטי. משהו שחותך את הגלילה הארוכה לריבועים קטנים ומסודרים ומחבר אותם יחד. אני קורא להמצאה הזו 'ספר'.

בעזרת אזורי CSS (CanIUse, עוברים אל chrome://flags ומפעילים את אזורי ה-CSS) וטרנספורמציות 3D של CSS, טכנולוגיית הספרים המתקדמת ביותר זמינה עכשיו בדפדפנים מודרניים. כל מה שצריך הוא כמה שורות של 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;
}

עכשיו התוכן מה-span #book-content יועבר ל-divs של ‎ .book-pages. אבל זהו ספר די גרוע. כדי למצוא ספר יותר ספרותי, צריך לצאת למסע. המסע שלנו יתחיל בגשר הקשת של טרנספורמציות 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, שמכילים טריליון גלגלי שיניים. כדי לעבור את השער, אנחנו צריכים להפוך את הספר השטוח שלנו למקראה ראויה. כדי להוסיף נפח לספר, אנחנו מעבירים מעט כל דף בכיוון ציר 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 בדפדפן, הדוגמה תיראה די מקולקלת. במקרה כזה, אפשר לנסות את הדוגמה הזו במקום זאת.