[html]
<style>
.booklet{ -moz-box-shadow:0px 0px 0px #fff!important;
-webkit-box-shadow:0px 0px 0px #fff!important;
box-shadow:0px 0px 0px #fff!important;
-moz-border-radius:10px!important;
-webkit-border-radius:10px!important;
border-radius:10px!important;
}
.booklet .b-wrap-left {
background:#fff url(https://i.ibb.co/d62jDjN/1.jpg)!important;
}
.booklet .b-wrap-right {
background:#efefef url(https://i.ibb.co/b7WPpsc/2.jpg) no-repeat top left !important;
}
.booklet .b-counter {
bottom:13px!important;
position:absolute!important;
display:block!important;
width:80%!important;
text-align:center!important;
font-size:12px!important;
color:#000!important;
padding:5px 35px 0!important;
background:transparent!important;
opacity:0.8!important;
}
.book_wrapper{ margin-left: auto;
padding-top:50px!important;
width:860px!important;
height:620px!important;
position:relative!important;
background:transparent url(https://i.ibb.co/4fGmNbQ/2.png) no-repeat 28px 29px!important;
}
.book_wrapper h1{
color:#000 !important;
font-family: Underdog !important;
background:transparent!important;
font-size:18px!important;
}
.book_wrapper p{
line-height:120%!important;
text-indent: 20px!important;
font-size:16px!important;
color:#000!important;
font-family: Underdog!important;
margin:5px 5px 5px 15px!important;
}
r{
text-align:right!important;
}
.book_wrapper img{
margin:10px 170px 5px 15px!important;
padding:4px!important;
}
a#next_page_button,
a#prev_page_button{
display:none;
position:absolute;
width:36px;
height:40px;
cursor:pointer;
margin-top:-20px;
top:50%;
background:transparent url(https://i.ibb.co/4Sd8h8N/image.png) no-repeat 0px -40px;
}
a#prev_page_button{
left:-30px;
}
a#next_page_button{
right: -13px!important;
background-position:-41px -40px;
}
a#next_page_button:hover{
background-position:-41px 0px;
}
a#prev_page_button:hover{
background-position:0px 0px;
}
.loading{
width:160px!important;
height:56px!important;
position: absolute!important;
top:50%!important;
margin-top:-28px!important;
right:135px!important;
line-height:56px!important;
color:#000!important;
padding-left:60px!important;
font-size:15px!important;
background: #000 url(http://ruseller.com/lessons/les809/demo … loader.gif) no-repeat 10px 50%!important;
opacity: 0.7!important;
z-index:9999;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>
<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="prev_page_button"></a>
<div id="loading" class="loading">Книга раскроется читателю через время...</div>
<div id="mybook" style="display:none;">
<div class="b-load">
<div>
<h1>Предисловие</h1>
<p>Прежде всего, хочется поблагодарить учтивого фонарщика за ту рутинную работу, которую он выполняет ежедневно и все еще исправно. Без его просветительского вклада никакого такого исследования не случилось бы, потому что рассмотреть весь путь туда и обратно в установленных Фантасмагорией условиях сделалось почти невозможным из-за царящего в ней мрака. <br> </p> <p>Отдельное спасибо хочу сказать кучке слюнтяев под моими окнами, так уперто пытавшихся нарушить мой сон уже не первую неделю. Однако эксперимент им сорвать не удалось, и знакомый полицай уже сделал им некоторый выговор, если не целое наказание, на что я очень рассчитываю. Мало кому до сих пор удавалось вывести меня из себя! Надеюсь, им воздастся каким-нибудь щелбаном от вездесущей госпожи Науки. Паразиты.</p>
</div>
<div>
<h1>Каратада и все вытекающие</h1>
<p>Если Вы читали мое вступительное слово к прошлой лекции, то наверняка знаете, что из Каратады, нашего первостепенного материального мира, тянется великое множество нитей к другим планам реальности, сосредоточенных далеко в Каратуда. Это объясняется тем, что наш и внешние миры расположены настолько близко, что местами даже соприкасаются, и это позволяет нам путешествовать между ними. Разумеется, в своих снах, лишенные отягощающей материальной оболочки, Вы способны передвигаться куда быстрее и почти что неограниченно. Эта способность нами часто игнорируется попросту потому, что мы спим и мало заинтересованы в том, чтобы разбираться во всех этих вопросах мироздания. И даже если Вы сон этот осознаете - Вам навряд ли удастся контролировать или покинуть его, чтобы отправиться бороздить просторы остальной Каратуды. Почему так?</p>
</div>
<div>
<p>Сделано это, скорее всего, намеренно, чтобы сновидцы ненароком не выпали из безопасной Фантасмагории и не провалились куда еще в опасные территории внешнего мироздания, которые предназначаются для чего угодно, но не для Вас и Вашего любопытного носа. <br></p><p>Как Вы уже догадались, Фантасмагория составляет только малую часть всеобъятной Каратуды. Нам позволено лишь мимолетом заглядывать в нее, отбывая свои сновидения здесь, в мире грез. Каратуда же включает в себя куда больше: неисчисляемые планы бытия. Мы заключены в бесконечное множество вариаций миров и сами представляем один из них, нам наиболее близкий. Чтобы Вам было понятнее, я скажу, что Каратада - внутри, Каратуда - извне. Именно в Каратуду заглядывают ясновидцы, чтобы рассмотреть будущее и заглянуть в прошлое, отсюда же черпают волшебство маги, отсюда приходят фантастические твари. Так много всего происходит здесь и так мало мы можем увидеть, не подвергаясь опасности утонуть в межпространственной неизвестности.</p>
</div>
<div>
<h1>Уровни реальности </h1>
<p><r>Чтобы читателю было нагляднее, я попробую классифицировать известные на сегодня планы бытия, рассмотрев их как Уровни, что будут расположены выше или ниже в абстрактном пространстве. Хотя мы привыкли ставить себя в центр Вселенной, Каратада, скорее всего, находится далеко не посередине, а наравне с другими измерениями по своим размерам и по своей значимости для мироздания. </p><p>Илиада, Божественное ложе, - условная верхушка, что олицетворяет культ света, духовности и порядка. Идущий вслед Промежуток связывает Илиаду с Каратадой и является абсолютным посредником для путешествий, волшебства и всего прочего. Схожее по устройству, но противопоставленное Промежутку, Пустоденство связывает Каратаду с нижними измерениями, куда включены Фантасмагория, Пандемониум, Стихийный хаос и Бездна, глубже которой пока не видно.</r></p>
</div>
<div>
<p> Повторюсь, что высота эта условна и лишь отражает символическое расстояние между тяжелой материей и бесплотным, духовным. В действительности планы сплетены так тесно, что удаленность между ними измеряется, пожалуй, числом точек соприкосновения между ними. Так, Промежуток и Пустоденство являются переходными измерениями - посредниками, а потому куда доступнее для нас. Например, телепортируясь с одного континента в другой, Вы всего-то преодолеваете тот же путь через Промежуток. </p>
<p>Очевидно, что при столь тесном контакте, когда планы буквально наслаиваются друг на друга, одни могут влять на другие и наоборот. Это отражается и непосредственно на Каратаде. Например, Стихийный хаос одарил Фугу нестандартным климатом и кипящей землей. Промежуток вмешался в природу Констанции, наделив ее рядом волшебных свойств. Бездонные ямы и твари со дна океанов - это наверняка проявление Пандемониума, что затраивает наш мир в самых его глубинах.</p>
</div>
<div>
<img src="https://i.ibb.co/5GcgGsr/1.png" alt="" />
</div>
<div>
<img src="https://i.ibb.co/qg94z0r/1.png" alt="" />
</div>
<div>
<p>Илиада. Божественное ложе. Упорядоченное добро, совершенное и недосягаемое. Воплощение идиллии, райского сада и абсолютного умиротворения. Нельзя так легко контактировать с Божественным планом и нет достоверного способа вознестись до этого Уровня. Существует поверье, будто бы до Илиады можно добраться, взобравшись на самую высокую точку мира - пик снежной Халапетии, что находится на Аллоде Ливера и которая превосходит любой парящий остров, - потому многие последователи отправляются в горы, чтобы попытать счастье и поговорить со своим покровителем.</p><p> Здесь, в Царстве света, высокие дворцы выполнены из белого мрамора и наполнены предметами искусства, включая множество Божественных артефактов. Прекрасные рощи и поляны представляют собой стройные, построенные в ряды деревья и цветущие люпины идеальных форм белоснежного цвета. Здесь обитают добрые Божества и достойные Вознесенные, а также ряд непорочных существ-небожителей. </p>
</div>
<div>
<img src="https://i.ibb.co/Hnwt3Hm/image.png" alt="" />
</div>
<div>
<img src="https://i.ibb.co/hyGKnhn/image.png" alt="" />
</div>
<div><p>Промежуток. План дверей. Измерение, куда отправляются неопределившиеся и те, кто находится где-то посередине своего пути. Этот план является проводником-посредником, насыщен эфиром и позволяет магам черпать отсюда волшебство. Потому любые заклинание здесь усиливаются или приобретают новые эффекты. Промежуток представляет собой туманное, искрящееся от магии пространство, в которое помещено бесконечное множество дверей, связующих все прочие планы между собой. Эти порталы могут выглядеть как арки, туннели, кроличьи норы и обычно требуют ключи, чтобы попасть туда, куда Вам необходимо, иначе - Промежуток отправит Вас куда-то по своему усмотрению. </p><p>Промежуток включает в себя Царство фей, тропы которого часто находят отражение в чащах леса Каратады и имеют тенденцию путать путешественника, - это проказни фей, так любящих подшутить. Потому иногда Промежуточное измерение принимает вид леса, пустыни или океана с опасными миражами и видениями.</p>
</div>
<div>
<p> Пустоденство - план брошенного и забытого. Хотя по структуре Пустоденство походит на Промежуток, волшебство здесь отвечает противоположным образом, а возникающие миражи отражают воспоминания, сожаления или страхи перед будущим. Это измерение походит на черную, беспросветную топь или бесконечный черный космос. Пустоденство насыщено "карманами", все бездонные сумки выходят сюда.</p><p>Фантасмагория. Мир грез, что открыт каждому. На основе желаний, страхов, тревог и впечатлений спящего Фантасмагория формирует для него кокон, внутри которого случается сновидение. Внешнюю оболочку кокона сложно, но возможно преодолеть. Покидая свой кокон, Вы рискуете проснуться или провалиться в другой план.</p><p>Пандемониум. Темное отражение мира. Это мрачное, жуткое место унылых пейзажей и блеклых цветов. Здесь существуют призраки и прочая нежить. </p>
</div>
<div>
<img src="https://i.ibb.co/wNn6v0c/image.png" alt="" />
</div>
<div>
<img src="https://i.ibb.co/k8q2jg2/image.png" alt="" />
</div>
<div><p>Пандемониум, сочетающий в себе страх и безумие, оказывает губительное воздействие на рассудок любого живого существа, что оказалось в нем.</p><p>Стихийный хаос содержит в себе четыре первородных элемента и их производные. Он включает в себя измерения, воплощающие одну из стихий, здесь обитают стихийные элементали. Разрывы в пространстве, ведущие на этот план, можно обнаружить в жерлах вулканов, парящих островах, диких джунглях и всюду, где царит Стихия. </p>
<p>Ревущая Бездна. Геенна. Демоническое измерение, преисполненное жестокости, ярости и страданий. У Бездны множество, возможно, бесконечное множество слоев. Злые Божества и свирепые духи обитают здесь. </p>
</div>
</div>
</div>
<div>
</div>
<!-- JavaScript -->
<script type="text/javascript">
$(function() {
var $mybook = $('#mybook');
var $bttn_next = $('#next_page_button');
var $bttn_prev = $('#prev_page_button');
var $loading = $('#loading');
var $mybook_images = $mybook.find('img');
var cnt_images = $mybook_images.length;
var loaded = 0;
//Предварительно загружаем все страницы в книжке,
//а затем вызываем плагин Booklet
$mybook_images.each(function(){
var $img = $(this);
var source = $img.attr('src');
$('<img/>').load(function(){
++loaded;
if(loaded == cnt_images){
$loading.hide();
$bttn_next.show();
$bttn_prev.show();
$mybook.show().booklet({
name: null, // Имя буклета, которое выводится в заголовке документа
width: 800, // Ширина контейнера
height: 500, // Высота контейнера
speed: 600, // Скорость перехода между страницами
direction: 'LTR', // Направление организации контента, по умолчанию LTR (left to right - слева направо), может быть RTL (справа налево)
startingPage: 0, // Индекс страницы, которая будет выводиться первой
easing: 'easeInOutQuad', // Метод сглаживания для завершения трансформации
easeIn: 'easeInQuad', // Метод сглаживания для первой половины трансформации
easeOut: 'easeOutQuad', // Метод сглаживания для второй половины трансформации
closed: true, // Запускаем книгу "закрытой", будут добавлены пустые страницы в начало и конец
closedFrontTitle: null, // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой начальной старницы
closedFrontChapter: null, // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой начальной страницы
closedBackTitle: null, // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой последней страницы
closedBackChapter: null, // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой конечной страницы
covers: false, // Используется с опцией "closed", делает первую и последнюю страницу обложками, без нумерации страниц (если возможно)
pagePadding: 10, // Отступ для обертки каждой страницы
pageNumbers: true, // Выводит номер на каждой странице
hovers: false, // Разрешает анимацию предварительного просмотра страниц при наведени курсора мыши, выводятся маленькие изображения предыдущей и следующей страницы
overlays: false, // Разрешает навигацию с использованием слоя перекрытия, когда разрешено - ссылки в контексте не будут реагировать на нажатия кнопки мыши
tabs: false, // Добавляет закладки вдоль верха страницы
tabWidth: 60, // Определяем ширину закладок
tabHeight: 20, // Определяем высоту закладок
arrows: false, // Добавляем стрелки поверх кромок книжки
cursor: 'pointer', // Установка css для курсора для боковой области книжки
hash: true, // Разрешает навигацию с использованием хэш строки, например: #/page/1 для страницы 1, будет действовать на все книжки с разрешенной опцией 'hash'
keyboard: true, // Разрешает навигацию с использованием клавиш стрелок(влево: предыдущая страница, вправо: следующая)
next: $bttn_next, // Селектор для элемента, который используется как выключатель перехода к следующей странице
prev: $bttn_prev, // Селектор для элемента, который используется как выключатель перехода к предыдущей странице
menu: null, // Селектор элемента, который используется как область меню, требуется для 'pageSelector'
pageSelector: false, // Разрешает навигацию с помощью выпадающего меню для страниц, требует опции 'menu'
chapterSelector: false, // Разрешает навигацию с помощью выпадающего меню глав, определяется атрибутом "rel", требует опции 'menu'
shadows: true, // Выводить тени при анимации страниц
shadowTopFwdWidth: 166, // Ширина тени для верха анимации вперед
shadowTopBackWidth: 166, // Ширина тени для верха анимации назад
shadowBtmWidth: 50, // Ширина тени для низа анимации
before: function(){}, // Возвратная функция, которая вызывается перед выполенением каждой анимации
after: function(){} // Возвратная функция, которая вызывается после выполнения каждой анимации
});
}
}).attr('src',source);
});
});
</script>[/html]
