3D CSS3 книга генерируется с помощью jQuery

Сегодня мы развиваем что-то действительно интересное и полезное. Новый плагин jQuery — генератор для книги. Книга состоит из страниц, каждая страница состоит из 2-х сторон (как в обычной книге), есть кнопки для перелистывания страниц назад-вперёд, находятся по бокам, и когда мы переворачиваем страницу мы видим, что страница в 3D (на базе CSS3).  Для того, чтобы достичь 3D эффекта, используется преобразования CSS3 (rotate3d, preserve-3d и rotateY) и эффекты перехода.

3D CSS3 книга

Демо

Шаг 1. HTML

HTML разметка страницы, текст с изображением, как обложка книги. Но вы можете применить все что угодно:

index.html



<div class="book">
    <img src=
http://pixelcom.crimea.ua/"book.jpg" alt="JavaScript Programmer's Reference" style="display:block" />
    <h2>JavaScript Programmer's Reference</h2>
    <h4>Cliff Wootton</h4>
    <h4>Wrox Press Ltd.</h4>
    <div>JavaScript Programmer's Reference</div>
    <h3>About the Author</h3>
    <div>Cliff Wootton lives in the south of England and works on multimedia systems and content management software for large data driven web sites. Currently he is developing interactive TV systems for BBC News Online in London ( http://www.bbc.co.uk/news ) and previously worked for other commercial broadcasters on their web sites. Before that he spent several years developing geophysical software and drawing maps with computers for oil companies.</div>
    <div>Cliff is married with three daughters and a growing collection of bass guitars.</div>
    <h3>Acknowledgements</h3>
    <div>It's hard to believe I've actually reached the stage of writing the introductory pages to this book. It's been a long process and I don't think I would have reached this point without the help of Tim Briggs at Wrox, who very gently urged me onwards and gave me encouragement when I needed it.</div>
</div>


Шаг 2. CSS

Стили CSS3 для нашей книги:

style.css



* {
  margin: 0;
  padding: 0;
  }
  header {
  background-color:rgba(33, 33, 33, 0.9);
  color:#fff;
  display:block;
  font: 14px/1.3 Arial,sans-serif;
  height:50px;
  position:relative;
  }
  header h2{
  font-size: 22px;
  margin: 0px auto;
  padding: 10px 0;
  width: 80%;
  text-align: center;
  }
  header a, a:visited {
  text-decoration:none;
  color:#fcfcfc;
  }
  
  body {
  background: url('background.png') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  /* CSS3 perspective and transform */
  -webkit-perspective: 1800px;
  -moz-perspective: 1800px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  }
  
  .book {
  left: 530px;
  position: absolute;
  top: 70px;
  width: 400px;
  
  /* CSS3 transform */
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  -moz-transform: rotate3d(0, 0, 1, 0deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  }
  .book img {width:330px; margin: 0 auto;}
  
  .page {
  background-color: #fff;
  position: absolute;
  
  /* CSS3 transform */
  -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  }
  
  .side:first-child {
  background: -webkit-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
  background: -moz-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
  border-left: 2px solid #000;
  height: 500px;
  overflow: hidden;
  padding: 30px 35px 80px 35px;
  position: absolute;
  width: 400px;
  
  /* CSS3 transform */
  -webkit-transform: translate3d(0px, 0px, 0.5px);
  -moz-transform: translate3d(0px, 0px, 0.5px);
  }
  
  .side:last-child {
  background: -webkit-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
  background: -moz-linear-gradient(-45deg, #fff 0%, #ddd 100%) repeat scroll 0 0 transparent;
  border-right: 2px solid #000;
  height: 500px;
  overflow: hidden;
  padding: 30px 35px 80px 35px;
  position: absolute;
  width: 400px;
  
  /* CSS3 transform */
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  }
  
  button {
  margin-top:10px;
  float:right;
  cursor:pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #050505;
  padding: 10px 20px;
  background: -moz-linear-gradient(
  top,
  #fff 0%,
  #ebebeb 50%,
  #dbdbdb 50%,
  #b5b5b5);
  background: -webkit-gradient(
  linear, left top, left bottom, 
  from(#fff),
  color-stop(0.50, #ebebeb),
  color-stop(0.50, #dbdbdb),
  to(#b5b5b5));
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #949494;
  -moz-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 2px rgba(255,255,255,1);
  -webkit-box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 2px rgba(255,255,255,1);
  box-shadow:
  0px 1px 3px rgba(000,000,000,0.5),
  inset 0px 0px 2px rgba(255,255,255,1);
  text-shadow:
  0px -1px 0px rgba(000,000,000,0.2),
  0px 1px 0px rgba(255,255,255,1);
  }


Шаг 3. HTML5 JavaScript

Теперь самый важный шаг — код JavaScript (наш генератор плагина JQuery), пожалуйста, создайте пустой файл script.js и вставьте следующий код:

script.js



// Goto page function
function gotoPage(i) {
    $('.page').eq(i).removeClass('active');
    if ((i-1) >= 0) {
        $('.page').eq(i-1).addClass('active');
    }
}

// Wrap everything as a jQuery plugin
(function($){
    $.fn.extend({
        EbookTransformer: function(options) {
            var defaults = {
                height: 400
            };
            var options = $.extend(defaults, options);

            // The book object
            var objBook = $(this);

            // Inner variables
            var vPages = new Array();
            var vSides = new Array();
            var vSubObj = new Array();
            var iTmpHeight = 0;

            // initialization function
            init = function() {
                // Walk through all the objects of the book, and prepare Sides (for Pages)
                objBook.children().each(function(i){
                    if (iTmpHeight + this.clientHeight > options.height && vSubObj.length) {
                        vSides.push(vSubObj);
                        vSubObj = new Array();
                        iTmpHeight = 0;
                    }

                    iTmpHeight += this.clientHeight;
                    vSubObj.push(this);
                });

                if (iTmpHeight > 0) {
                    vSides.push(vSubObj);
                }
                $(vSides).wrap('<div class="side"></div>');

                // Prepare Pages (each Page consists of 2 Sides)
                var iPage = 1;
                var vCouples = Array();
                objBook.children().each(function(i){
                    // Add Next and Prev buttons
                    if (vCouples.length == 0) {
                        $(this).append('<button onclick="gotoPage('+iPage+')">Далі</button>');
                    }
                    if (vCouples.length == 1) {
                        $(this).append('<button onclick="gotoPage('+(iPage-1)+')">Раніше</button>');
                    }
                    vCouples.push(this);

                    if (vCouples.length == 2) {
                        vPages.push(vCouples);
                        vCouples = new Array();
                        iPage++;
                    }
                });
                if (vCouples.length == 1) {
                    vCouples.push($('<div class="side"><h2>Край</h2><button onclick="gotoPage('+(iPage-1)+')">Раніше</button></div>')[0]);
                    vPages.push(vCouples);
                }
                $(vPages).wrap('<div class="page"></div>');

                // Add extra CSS for the pages
                var sExtraCSS = '';
                objBook.children().each(function(i){
                    //alert(i); // 0 .. 2
                    sExtraCSS += ''+
                    '.page:nth-child('+(i+1)+') {'+
                    '-moz-transform: translate3d(0px, 0px, -'+i+'px);'+
                    '-webkit-transform: translate3d(0px, 0px, -'+i+'px);'+
                    '}'+
                    '.active:nth-child('+(i+1)+') {'+
                    '-moz-transform: rotateY(-179deg) translate3d(0px, 0px, -'+i+'px);'+
                    '-webkit-transform: rotateY(-179deg) translate3d(0px, 0px, -'+i+'px);'+
                    '}';
                });
                $('.book').append('<style>'+sExtraCSS+'</style>');
            };

            // initialization
            init();
        }
    });
})(jQuery);

// Window onload
jQuery(window).load(function() {
    $('.book').EbookTransformer({height: 480});
});



Идея скрипта похожа в использовании пагинации страниц, чтобы разобрать все входные данные (наш исходный текст) и составить новую структуру HTML для 3D-книги. На первом этапе мы проходим через все внутренние элементы, и превращаим их в Sides (в наших страницах). Мы должны проверить высоты внутренних элементов, и, в случае, если общая высота боковых элементов больше, чем максимально допустимый, мы начинаем сбор следующей стороны. На втором этапе мы обратимся к результатом сторон на странице. Каждая страница состоит из нескольких сторон. Также на втором этапе мы добавим кнопки навигации. И, наконец, для размещения страниц друг на друга, мы должны создавать дополнительные стили CSS (на лету). Мы используем свойства CSS3 translate3d для подготовки пользовательских стилей (с разным значением Z) для всех создаваемых страниц.

Заключение

Если у вас есть какие-либо предложения для этой статьи — вы можете поделиться ими в комментариях. Удачи вам в вашей работе!

Статья подготовлена для вас коллективом сайта www.pixelcom.crimea.ua
Оригинал статьи: www.script-tutorials.com/3d-css3-book-generator-with-jquery
Перевел: Виктор Клим
Правила использования материалов сайта!

13 комментариев на тему “3D CSS3 книга генерируется с помощью jQuery”

  1. комментарии

    Можете сделать вариант, когда пользователь сам задает разбиение страницы? мне кажется, это было бы актуальнее…

  2. комментарии

    А также вариант с односторонней книгой… а так интересно сделано, спасибо

  3. комментарии

    Ок, проблема легко решается с помощью ксс.
    .page_empty
    {
    height: 510px;
    width: 400px;
    background-color: yellow;
    }

    Тогда страницы легко задать


    page_1

    page_2
    Текст

    page_3

    page_4
    Текст

  4. комментарии

    Текст сжимается и четкость портится. Можно этого избежать?

  5. комментарии

    ММ интересно =) а нельзя добавить закрывающуюся обложку, как в том примере?

  6. комментарии

    Узнать бы больше про параметры отступов книги? И сложно добавить заголовок посередине.

  7. комментарии

    Узнать бы больше про параметры отступов книги? — вам повезло, документации очень много.

    И сложно добавить заголовок посередине — это не сложно, нужно в таблицу стилей дописать код:
    h2, h3 {text-align:center}

  8. комментарии

    - И сложно добавить заголовок посередине — это не сложно, нужно в таблицу стилей дописать код:
    h2, h3 {text-align:center}

    — это естественное решение не будет работать =)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>