3D FlipBook CSS layer highlight

One more example about CSS layers. It demonstrates how to use CSS layers to organose navigation inside a book using 3D FlipBook jQuery plugin.

  var html = [
    '<div class="page">',
      '<a href="#" class="link go-page" data-page-n="1" style="top: 160px; left: 80px; width: 680px; height: 45px;"></a>',
      '<a href="#" class="link go-page" data-page-n="2" style="top: 225px; left: 80px; width: 680px; height: 45px;"></a>',
    '</div>'
  ].join(''),
  css = [
    '.page {',
      'position: relative;',
      'width: 1024px;',
      'height: 1448px;',
    '}',
    '.page .link {',
      'background-color: white;',
      'display: block;',
      'position: absolute;',
      'opacity: 0.1;',
    '}',
    '.page .link:hover {',
      'opacity: 0.2;',
    '}',
    '.page .link:active {',
      'opacity: 0.3;',
    '}'
  ].join(''),
  js = [
    'function init(c, a) {',
      'c.find(".page .go-page").on("click", function(e) {',
        'e.preventDefault();',
        'var page = parseInt(a.$(e.target).attr("data-page-n"));',
        'console.log(page);',
        'a.scene.ctrl.goToPage(page-1);',
      '});',
      'return {};',
    '}; init'
  ].join('');

  $('.sample-container').FlipBook({
    pageCallback: function(n) {
      return {
        type: 'image',
        src: 'books/image/highlight/1.jpg',
        interactive: false
      };
    },
    pages: 6,
    propertiesCallback: function(props) {
      props.cssLayersLoader = function(n, clb) {
        if(!n) { // all layers are inside one iframe so we need define styles just once
          clb([{
            css: css,
            html: html,
            js: js
          }]);
        }
        else {
          clb([{
            html: html,
            js: js
          }]);
        }
      };
      return props;
    }
  });