[html]<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://ruseller.com/lessons/les809/demo/booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://ruseller.com/lessons/les809/demo/booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<link href="http://ruseller.com/lessons/les809/demo/booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
<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) no-repeat top left!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/ngT2Xjb/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>Некромантия считается среди смердов знанием опасным, а потому запретным. Достать хоть крупицы информации о ней — редкая удача для мага, нашедшего в себе потенциал творить называемоё «чёрным» колдовство. В моих скромных силах немного упростить ему задачу, вложив в этот труд крупицу тех знаний, что я имею сам. Для удобства они разложены по уровням сложности.</p>
<p>Пользуйся им с осторожностью, здраво оценивай свои силы, друг мой, и помни: <i>чем дольше вглядываешься в бездну, то бездна тоже начинает смотреть в тебя.</i> Готов ли ты выстоять перед интересом Ревущей, когда придёт час?</p>
</div>
<div>
<p>Итак, начнем с простого. Живые мертвецы — скелеты, зомби, вурдалаки и им подобная нежить, оживленная негативной энергией, являются как самым распространенным видом нежити, так и самым безобидным для живых. По крайней мере, они так наивно полагают. </p>
<p>Медлительные, глухо стонущие и дурно пахнущие — всего лишь марионетки в руках истинного зла, однако не стоит забывать, что эти самые марионетки представляют собой истинную опасность. Порой даже большую, когда вместо руки надежного хозяина, становятся ведомы одной только ненавистью к всему сущему и неутолимым голодом. </p>
<p>Хороший некромант обязан знать, как взять такую нежить под свой контроль. </p>
</div>
<div>
<h1>Уровень первый. Живая конечность.</h1>
<p>Простейшее из существующих заклинаний поднятия, молодому магу не потребуется много сил на его осуществление. Не требуется ни ритуалов, ни кровавых жертв — <i>а мы ведь с тобой понимаем, что отнимая что-то у покровительницы смерти, обязаны отдать что-то взамен, правда же? </i> Госпожа мало кому готова простить пренебрежение к своей милости. </p>
<p>Простота эквивалентна пользе: такой мертвец рассыплется прахом сразу же, стоит противнику только шагнуть в его сторону. Не возлагай на них надежд, как на хороших бойцов. Нежить первого уровня способна разве что селян недалеких напугать, да послужить неплохим отвлекающим маневром, пока её создатель успешно сбегает с поля боя. </p>
</div>
<div>
<h1>Уровень второй. Раб. </h1>
<p>Нечто куда более впечатляющее и даже способное взять в свои хлипкие ручонки меч. Способен выдержать целый удар, прежде чем развалиться на неприглядного вида куски гниющей плоти, и, если повезет, даже нанести урон своему сопернику, если нападет первым. Эффект неожиданности всегда играет мертвецам на руку. А уж если таких будет не один, а десяток-другой… нет-нет, всё ещё не достаточно, чтобы затерроризировать мало-мальски приличную деревеньку. </p>
<p>Тупы и неловки, отлично справляются с грубой работенкой. Бригада мёртвых рабочих, однако, вызовет много подозрений у соседей. Действуйте скрытно. </p>
</div>
<div>
<h1>Уровень третий. Слуга. </h1>
<p>Золотая середина среди поднятой нежити: умеренная трата сил ведет к умеренно хорошему результату. Чтобы облегчить себе задачу, можно окропить землю, в которой лежит будущий слуга, людской кровью, напитывая это место энергией. Не так важно, будет ли кровь приготовлена заранее, выпущена из чужой глотки или небольшого надреза на собственном запястье. Главное — магические плетения будут ложиться куда лучше. </p>
<p>Слуги вполне оправдывают своё звание, чётко следуя указам хозяина, не больше и не меньше. Команды, отданные им, стоит проговаривать громко и четко, если не желаете столкнуться с некоторыми… постыдными конфузами. Воля и воспоминания о прошлой жизни у них отсутствуют, так что не стоит надеяться, что они поймут витиеватые угрозы, которые вы посылаете своим врагам. </p>
</div>
<div>
<h1>Уровень четвертый. Спутник. </h1>
<p>Послушный, умелый, может говорить, если не сгнили голосовые связки. Придется приложить немало усилий, чтобы заполучить такого в своё распоряжение, но результат того стоит: имея воспоминания на уровне мышечной памяти, спутник куда более хорош в качестве бойца или, возможно, мастера, если при жизни занимался ремеслом. Такому можно поручить и бытовые дела, ведь руки его не дрожат, а в голове сидит понимание о том, что и как должно в этом мире работать. Возможно, вам даже выпадет шанс поболтать по душам? </p>
<p>Чем свежее тело, тем больше мертвец походит на живого человека. При удачном стечении обстоятельств, его можно выпустить в толпу людей, и никто не заметит подвоха в хлипкой фигурке, что кутается в плащ посреди жаркого лета и странно пахнет. </p>
</div>
<div>
<h1>Уровень пятый. Носящий имя. <h1>
<p>Опасный в своей разумности мертвец, он помнит прошлое, и, если некромант не лишит его малейшего подобия собственной воле, запросто может сойти с ума. Последствия могут оказаться самыми непредсказуемыми, но, вероятнее всего, первой целью яростного безумия нежити станет тот, кто обрёк её на мучительное существование. Имейте смелость столкнуться с последствиями своих действий лицом к лицу или же будьте куда более осмотрительны, не поднимая подобным образом тела разумных существ. Чревато. </p>
<p>Ловкие, сильные, <i>почти</i> живые. Своей близостью к людскому подобию могут напугать неподготовленного к такому зрелищу юного мага смерти. Вы вольны направить их силу в нужное вам русло, и не будете разочарованы.</p>
</div>
<div>
<p>Контроль над нежитью не может длиться постоянно. Он ослабевает в течении недели, в лучшем случае — месяца, и по окончании этого срока мертвец попросту рассыплется пеплом, без возможности снова быть поднятой. Крайне досадное явление, особенно когда вспоминаешь о нём в самый разгар боя. </p>
<p>Обновляйте чары вовремя(хотя бы за час до сражения, если о таковом известно), чтобы не иметь нужды искать новых подопечных, а так же следите за состоянием их плоти: если нежить находится у вас на долгой службе, не поленитесь прочитать пару трактатов о бальзамировании и уходом за телами покойных. </p>
<p>Не забывайте, некромантия — вещь многогранная, позволяющая проявить себя с разных сторон. Засим откланяюсь. </p>
</div>
<div>
<img src="https://i.ibb.co/yp8JB3M/image.png" alt="" />
</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]
