Благодарим за выбор нашего сервиса!
Тестовое сообщение - тестовое сообщение и прочее, так-то, да, проверка
Страница: 1
Сообщений 1 страница 22 из 22
Поделиться12015-10-15 00:29:21
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
Поделиться32016-09-06 20:44:25
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
аа
аа
аа
ааа
ааа
аааа
аааа
Отредактировано Meinu (2016-09-06 20:44:46)
Поделиться42016-09-06 20:44:54
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
ууу
Поделиться52016-09-06 20:45:02
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
ууууцц
Поделиться62016-09-06 20:45:07
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
пнерет
ddvdfgdbd
tjiuluktrb
Отредактировано Meinu (2016-09-06 20:45:14)
Поделиться72016-09-06 20:45:32
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
мки к
grrhv
thvytt
Отредактировано Meinu (2016-09-06 20:45:40)
Поделиться82016-09-06 20:45:50
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
mh mhg
Поделиться92016-09-06 20:45:57
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
d fgb ht n
Поделиться102016-09-06 20:46:03
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
fbfnnhgnf
Поделиться112016-09-06 20:46:08
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
fb hnmyndsa
Поделиться122016-09-06 20:46:14
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
dgr b
Поделиться142016-09-06 22:09:09
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
ня
Поделиться152025-12-18 03:20:04
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
[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 1px #fff;
-webkit-box-shadow:0px 0px 1px #fff;
box-shadow:0px 0px 1px #fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.booklet .b-wrap-left {
background:#fff url(http://ruseller.com/lessons/les809/demo … eft_bg.jpg) no-repeat top left;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.booklet .b-wrap-right {
background:#efefef url(http://ruseller.com/lessons/les809/demo … ght_bg.jpg) no-repeat top left;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.booklet .b-counter {
bottom:10px;
position:absolute;
display:block;
width:80%;
height:20px;
border-top:1px solid #ddd;
color:#222;
text-align:center;
font-size:12px;
padding:5px 0 0;
background:transparent;
-moz-box-shadow:0px -1px 1px #fff;
-webkit-box-shadow:0px -1px 1px #fff;
box-shadow:0px -1px 1px #fff;
opacity:0.8;
}
.book_wrapper{
margin:0 auto;
padding-top:50px;
width:860px;
height:540px;
position:relative;
background:transparent url(https://forumstatic.ru/files/000d/19/7b/55725.png) no-repeat 28px 29px;
}
.book_wrapper h1{
color:#13386a;
margin:5px 5px 5px 15px;
font-size:26px;
background:transparent url(http://ruseller.com/lessons/les809/demo/images/h1.png) no-repeat bottom left;
padding-bottom:7px;
}
.book_wrapper p{
font-size:14px;
margin:5px 5px 5px 15px;
}
.book_wrapper img{
margin:10px 0px 5px 35px;
width:300px;
padding:4px;
border:1px solid #ddd;
-moz-box-shadow:1px 1px 1px #fff;
-webkit-box-shadow:1px 1px 1px #fff;
box-shadow:1px 1px 1px #fff;
}
.booklet .b-wrap-right img{
border:1px solid #E6E3C2;
}
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(http://ruseller.com/lessons/les809/demo … uttons.png) no-repeat 0px -40px;
}
a#prev_page_button{
left:-8px;
}
a#next_page_button{
right:-6px;
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;
height:56px;
position: absolute;
top:50%;
margin-top:-28px;
right:135px;
line-height:56px;
color:#fff;
padding-left:60px;
font-size:12px;
background: #000 url(http://ruseller.com/lessons/les809/demo … loader.gif) no-repeat 10px 50%;
opacity: 0.7;
z-index:9999;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>
<head>
<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>
<img src="https://i.pinimg.com/1200x/6b/3e/cd/6b3ecd42ab413ac9c002e52e360f8627.jpg" alt=""/>
<h1>Заголовок страницы 1</h1>
<p>Наполнение страницы 1 </p>
</div>
<div>
<img src="https://i.pinimg.com/1200x/6b/3e/cd/6b3ecd42ab413ac9c002e52e360f8627.jpg" alt="" />
<h1>Заголовок страницы два</h1>
<p>Контент второй страницы </p>
</div>
</div>
</div>
<div>
</div>
</head>
<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: 725, // Ширина контейнера
height: 450, // Высота контейнера
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: false, // Разрешает навигацию с использованием хэш строки, например: #/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, // Ширина тени для низа анимации
});
}
}).attr('src',source);
});
});
</script>
[/html]
Поделиться162025-12-21 15:28:29
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
[html]<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="https://ruseller.com/lessons/les809/demo/booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="https://ruseller.com/lessons/les809/demo/booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<link href="https://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 1px #fff;
-webkit-box-shadow: 0px 0px 1px #fff;
box-shadow: 0px 0px 1px #fff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.booklet .b-wrap-left {
background: #fff url(https://ruseller.com/lessons/les809/dem … eft_bg.jpg) no-repeat top left;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.booklet .b-wrap-right {
background: #efefef url(https://ruseller.com/lessons/les809/dem … ght_bg.jpg) no-repeat top left;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.booklet .b-counter {
bottom: 10px;
position: absolute;
display: block;
width: 80%;
height: 20px;
border-top: 1px solid #ddd;
color: #222;
text-align: center;
font-size: 12px;
padding: 5px 0 0;
background: transparent;
-moz-box-shadow: 0px -1px 1px #fff;
-webkit-box-shadow: 0px -1px 1px #fff;
box-shadow: 0px -1px 1px #fff;
opacity: 0.8;
}
.book_wrapper {
margin: 0 auto;
padding-top: 50px;
width: 860px;
height: 540px;
position: relative;
background: transparent url(https://forumstatic.ru/files/000d/19/7b/55725.png) no-repeat 28px 29px;
}
.book_wrapper h1 {
color: #13386a;
margin: 5px 5px 5px 15px;
font-size: 26px;
background: transparent url(https://ruseller.com/lessons/les809/demo/images/h1.png) no-repeat bottom left;
padding-bottom: 7px;
}
.book_wrapper p {
font-size: 14px;
margin: 5px 5px 5px 15px;
}
.book_wrapper img {
margin: 10px 0px 5px 35px;
width: 300px;
padding: 4px;
border: 1px solid #ddd;
-moz-box-shadow: 1px 1px 1px #fff;
-webkit-box-shadow: 1px 1px 1px #fff;
box-shadow: 1px 1px 1px #fff;
}
.booklet .b-wrap-right img {
border: 1px solid #E6E3C2;
}
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://ruseller.com/lessons/les809/dem … uttons.png) no-repeat 0px -40px;
}
a#prev_page_button {
left: -8px;
}
a#next_page_button {
right: -6px;
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;
height: 56px;
position: absolute;
top: 50%;
margin-top: -28px;
right: 135px;
line-height: 56px;
color: #fff;
padding-left: 60px;
font-size: 12px;
background: #000 url(https://ruseller.com/lessons/les809/dem … loader.gif) no-repeat 10px 50%;
opacity: 0.7;
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">
<div class="b-load">
<div class="b-wrap-left">
<img src="https://i.pinimg.com/1200x/6b/3e/cd/6b3ecd42ab413ac9c002e52e360f8627.jpg" alt="" />
<h1>Заголовок страницы 1</h1>
<p>Наполнение страницы 1</p>
</div>
<div class="b-wrap-right">
<img src="https://i.pinimg.com/1200x/6b/3e/cd/6b3ecd42ab413ac9c002e52e360f8627.jpg" alt="" />
<h1>Заголовок страницы два</h1>
<p>Контент второй страницы</p>
</div>
</div>
</div>
</div>
<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;
// Предварительно загружаем все изображения
$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();
// Инициализируем плагин booklet
$mybook.booklet({
width: 725,
height: 450,
speed: 600,
direction: 'LTR',
startingPage: 0,
easing: 'easeInOutQuad',
easeIn: 'easeInQuad',
easeOut: 'easeOutQuad',
closed: true,
covers: false,
pagePadding: 10,
pageNumbers: true,
hovers: false,
overlays: false,
tabs: false,
arrows: false,
cursor: 'pointer',
keyboard: true,
next: $bttn_next,
prev: $bttn_prev,
shadows: true,
shadowTopFwdWidth: 166,
shadowTopBackWidth: 166,
shadowBtmWidth: 50
});
}
}).attr('src', source);
});
});
</script>
[/html]
Поделиться172025-12-21 15:40:06
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
[html]
<style>
.book_wrapper {
position: relative;
width: 800px;
margin: 0 auto;
padding: 50px 0;
}
#book_container {
position: relative;
overflow: hidden;
width: 100%;
height: 500px;
}
.page_spread {
position: absolute;
width: 100%;
height: 100%;
display: flex;
transition: transform 0.5s ease;
}
.page {
flex: 1;
padding: 20px;
box-sizing: border-box;
background: #fff;
overflow: hidden;
}
.page_left {
transform: perspective(1000px) rotateY(0deg);
}
.page_right {
transform: perspective(1000px) rotateY(0deg);
}
/* Анимация перелистывания */
.flipping .page_left {
transform: perspective(1000px) rotateY(180deg);
}
.flipping .page_right {
transform: perspective(1000px) rotateY(-180deg);
}
/* Кнопки навигации */
#next_page_button, #prev_page_button {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px;
background: rgba(0,0,0,0.5);
color: white;
border-radius: 5px;
cursor: pointer;
z-index: 10;
}
#next_page_button {
right: 20px;
}
#prev_page_button {
left: 20px;
}
</style>
<body>
<div class="book_wrapper">
<a id="next_page_button">→</a>
<a id="prev_page_button">←</a>
<div id="book_container">
<!-- Страница 1 (левая/правая пара) -->
<div class="page_spread active">
<div class="page page_left">
<img src="https://i.pinimg.com/1200x/6b/3e/cd/6b3ecd42ab413ac9c002e52e360f8627.jpg" alt="Кот спит">
</div>
<div class="page page_right">
<h1>Заголовок страницы 1</h1>
<p>Наполнение страницы 1</p>
</div>
</div>
<!-- Страница 2 (левая/правая пара) -->
<div class="page_spread">
<div class="page page_left">
<img src="https://i.pinimg.com/736x/97/f4/0c/97f40c1048868e908b81d734e03f8885.jpg" alt="Картинка 2">
</div>
<div class="page page_right">
<h1>Заголовок страницы 2</h1>
<p>Наполнение страницы 2</p>
</div>
</div>
<!-- Добавьте другие развороты по аналогии -->
</div>
</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', function() {
const bookContainer = document.getElementById('book_container');
const pageSpreads = document.querySelectorAll('.page_spread');
const nextBtn = document.getElementById('next_page_button');
const prevBtn = document.getElementById('prev_page_button');
let currentPage = 0;
// Функция переключения страниц
function flipPage(direction) {
const activeSpread = pageSpreads[currentPage];
activeSpread.classList.add('flipping');
setTimeout(() => {
activeSpread.classList.remove('flipping');
if (direction === 'next') {
currentPage++;
if (currentPage >= pageSpreads.length) currentPage = 0;
} else {
currentPage--;
if (currentPage < 0) currentPage = pageSpreads.length - 1;
}
// Обновляем активный разворот
pageSpreads.forEach((spread, index) => {
spread.style.transform = `translateX(
</script>
[/html]
Поделиться182025-12-21 16:02:48
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
[html]
<head>
<style>
.book_wrapper {
position: relative;
width: 800px;
margin: 0 auto;
padding: 50px 0;
}
#book_container {
position: relative;
overflow: hidden;
width: 100%;
height: 500px;
background-image: url(https://forumstatic.ru/files/000d/19/7b/55725.png);
}
.page_spread {
position: absolute;
width: 100%;
height: 100%;
display: flex;
/* transition: transform 0.5s ease; ← УБРАТЬ */
}
.page {
flex: 1;
padding: 20px;
box-sizing: border-box;
background: transparent;
overflow: hidden;
}
.page_left {
transform: perspective(1000px) rotateY(0deg);
}
.page_right {
transform: perspective(1000px) rotateY(0deg);
}
.page img {
margin: 10px 0px 5px 35px;
width: 300px;
height: 200px;
padding: 4px;
border: 1px solid #ddd;
object-fit: cover;
}
/* Анимация перелистывания */
.flipping .page_left {
transform: perspective(1000px) rotateY(180deg);
}
.flipping .page_right {
transform: perspective(1000px) rotateY(-180deg);
}
/* Кнопки навигации */
#next_page_button, #prev_page_button {
position: absolute;
top: 80%;
transform: translateY(-50%);
padding: 10px;
background: rgba(0,0,0,0.5);
color: white;
border-radius: 5px;
cursor: pointer;
z-index: 10;
}
#next_page_button {
right: 20px;
}
#prev_page_button {
left: 20px;
}
</style>
</head>
<body>
<div class="book_wrapper">
<a id="next_page_button">→</a>
<a id="prev_page_button">←</a>
<div id="book_container">
<!-- Страница 1 (левая/правая пара) -->
<div class="page_spread active">
<div class="page page_left">
<img src="https://i.pinimg.com/originals/42/49/b7/4249b7a08ae9f7d3a7e2586174e83867.gif" alt="Ворон">
<h1>Заголовок страницы 1</h1>
<p>Наполнение страницы 1</p>
</div>
<div class="page page_right">
<img src="https://i.pinimg.com/originals/42/49/b7/4249b7a08ae9f7d3a7e2586174e83867.gif" alt="Воронт">
<h1>Заголовок страницы 2</h1>
<p>Наполнение страницы 2</p>
</div>
</div>
<!-- Страница 2 (левая/правая пара) -->
<div class="page_spread">
<div class="page page_left">
<img src="https://i.pinimg.com/736x/97/f4/0c/97f40c1048868e908b81d734e03f8885.jpg" alt="Картинка 2">
</div>
<div class="page page_right">
<h1>Заголовок страницы 4</h1>
<p>Наполнение страницы 4</p>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const bookContainer = document.getElementById('book_container');
const pageSpreads = document.querySelectorAll('.page_spread');
const nextBtn = document.getElementById('next_page_button');
const prevBtn = document.getElementById('prev_page_button');
let currentPage = 0;
// Инициализация позиций
pageSpreads.forEach((spread, index) => {
spread.style.transform = `translateX(${index * 100}%)`;
});
function flipPage(direction) {
// Сразу убираем класс анимации (если был)
pageSpreads[currentPage].classList.remove('flipping');
// Логика смены страницы
if (direction === 'next') {
currentPage++;
if (currentPage >= pageSpreads.length) currentPage = 0;
} else {
currentPage--;
if (currentPage < 0) currentPage = pageSpreads.length - 1;
}
// МГНОВЕННОЕ обновление позиций
pageSpreads.forEach((spread, index) => {
spread.style.transform = `translateX(${ (index - currentPage) * 100 }%)`;
});
}
// Обработчики кликов
nextBtn.addEventListener('click', () => flipPage('next'));
prevBtn.addEventListener('click', () => flipPage('prev'));
// Клавиатура
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') flipPage('next');
if (e.key === 'ArrowLeft') flipPage('prev');
});
});
</script>
</body>
[/html]
Поделиться192025-12-21 17:01:13
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
[html]
<head>
<style type="text/css">
@font-face {
font-family: 'Kobzar_KS';
src: url('https://forumstatic.ru/files/0016/d8/85/45656.eot'),
url('https://forumstatic.ru/files/0016/d8/85/28433.woff') format('woff'),
url('https://forumstatic.ru/files/0016/d8/85/38752.ttf') format('truetype'),
url('https://forumstatic.ru/files/0016/d8/85/54587.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TrixiePro-Heavy';
src: url('https://forumstatic.ru/files/0016/d8/85/43723.eot'),
url('https://forumstatic.ru/files/0016/d8/85/30648.woff') format('woff'),
url('https://forumstatic.ru/files/0016/d8/85/15579.ttf') format('truetype'),
url('https://forumstatic.ru/files/0016/d8/85/84435.svg') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
<style>
.book_wrapper {
position: relative;
width: 800px;
margin: 0 auto;
padding: 50px 0;
}
#book_container {
position: relative;
overflow: hidden;
width: 100%;
height: 500px;
background-image: url(https://forumstatic.ru/files/000d/19/7b/55725.png);
}
.page_spread {
position: absolute;
width: 100%;
height: 100%;
display: flex;
/* transition: transform 0.5s ease; ← УБРАТЬ */
}
.page {
/*flex: 1; */
padding: 20px;
box-sizing: border-box;
background: transparent;
overflow: hidden;
}
.page_left {
transform: perspective(1000px) rotateY(0deg);
max-width: 380px;
}
.page_right {
transform: perspective(1000px) rotateY(0deg);
max-width: 380px;
}
.page img{
margin: 10px 0px 5px 35px;
max-width: 300px;
height: auto;
padding: 4px;
/*border: 1px solid #ddd;*/
object-fit: cover;
}
p {
font: 15px 'Kobzar_KS' ;
margin: 15px 0 0 35px !important;
}
h1 {
font: 1.6em 'TrixiePro-Heavy' !important;
text-align: end;
margin: 25px 0 0 0 !important;
}
h2{
font: 15px 'Kobzar_KS' !important;
text-align: end;
}
h3 {
font: 1.0em 'TrixiePro-Heavy' !important;
text-align: end;
}
/* Анимация перелистывания */
.flipping .page_left {
transform: perspective(1000px) rotateY(180deg);
}
.flipping .page_right {
transform: perspective(1000px) rotateY(-180deg);
}
/* Кнопки навигации */
#next_page_button, #prev_page_button {
position: absolute;
top: 80%;
transform: translateY(-50%);
padding: 10px;
background: rgba(0,0,0,0.5);
color: white;
border-radius: 5px;
cursor: pointer;
z-index: 10;
}
#next_page_button {
right: 20px;
}
#prev_page_button {
left: 20px;
}
</style>
</head>
<body>
<div class="book_wrapper">
<a id="next_page_button">→</a>
<a id="prev_page_button">←</a>
<div id="book_container">
<!-- Страница 1 (левая/правая пара) -->
<div class="page_spread active">
<div class="page page_left">
<br><br>
<img src="https://upforme.ru/uploads/001c/82/f2/36/472677.png" alt=" ">
<br><h2>Марблхед, лето 2025</h2>
</div>
<div class="page page_right">
<h1>ДАВАЙ УЖЕ ПЕРЕЙДЁМ НА «МЫ»</h1>
<h3>27/05/2025</h3>
<p>В конце второго курса между парнями возникла крохотная такая, размером с Гранд-Каньон, недосказанность. Как следствие — неловкость в общении, сомнения и недоверие в тандеме ведьмака и фамильяра повлекли за собой существенный спад в их магических способностях. Едва не завалив конец семестра, парни получили настоятельную рекомендацию: дистанцию не увеличивать и по возможности восстановить прежнюю совместимость в паре. Сказать, в общем-то, было проще, чем воплотить в жизнь, но вот они здесь: едут на каникулы в родной город Нэйтана. Оба два.</p>
</div>
</div>
<!-- Страница 2 (левая/правая пара) -->
<div class="page_spread">
<div class="page page_left">
<img src="https://i.pinimg.com/originals/42/49/b7/4249b7a08ae9f7d3a7e2586174e83867.gif" alt=" ">
</div>
<div class="page page_right">
<h1>Заголовок страницы 4</h1>
<p>Наполнение страницы 4</p>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const bookContainer = document.getElementById('book_container');
const pageSpreads = document.querySelectorAll('.page_spread');
const nextBtn = document.getElementById('next_page_button');
const prevBtn = document.getElementById('prev_page_button');
let currentPage = 0;
// Инициализация позиций
pageSpreads.forEach((spread, index) => {
spread.style.transform = `translateX(${index * 100}%)`;
});
function flipPage(direction) {
// Сразу убираем класс анимации (если был)
pageSpreads[currentPage].classList.remove('flipping');
// Логика смены страницы
if (direction === 'next') {
currentPage++;
if (currentPage >= pageSpreads.length) currentPage = 0;
} else {
currentPage--;
if (currentPage < 0) currentPage = pageSpreads.length - 1;
}
// МГНОВЕННОЕ обновление позиций
pageSpreads.forEach((spread, index) => {
spread.style.transform = `translateX(${ (index - currentPage) * 100 }%)`;
});
}
// Обработчики кликов
nextBtn.addEventListener('click', () => flipPage('next'));
prevBtn.addEventListener('click', () => flipPage('prev'));
// Клавиатура
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') flipPage('next');
if (e.key === 'ArrowLeft') flipPage('prev');
});
});
</script>
</body>
[/html]
Поделиться202025-12-22 01:14:47
- Администратор
- Информация: Мэй, 20
- Зарегистрирован: 2015-10-15
- Приглашений: 0
- Сообщений: 24
- Уважение: [+0/-0]
- Позитив: [+2/-0]
- Провел на форуме:
11 часов 55 минут - Последний визит:
2025-12-23 04:36:03 - Раса:
человек - Особенности:
- Адекватность: 100/100
[html]
<head>
<link rel="stylesheet" href="https://forumstatic.ru/files/0016/d8/85/30604.css">
</head>
<body>
<div class="book_wrapper">
<a id="next_page_button">→</a>
<a id="prev_page_button">←</a>
<div id="book_container">
<!-- Страница 1 (левая/правая пара) -->
<div class="page_spread active">
<div class="page page_left">
<br><br>
<img src="https://upforme.ru/uploads/001c/82/f2/36/472677.png" alt=" ">
<br><h2>Марблхед, лето 2025</h2>
</div>
<div class="page page_right">
<h1>ДАВАЙ УЖЕ ПЕРЕЙДЁМ НА «МЫ»</h1>
<h3>27/05/2025</h3>
<p>ТУТ ОПИСАНИЕ</p>
</div>
</div>
<!-- Страница 2 (левая/правая пара) -->
<div class="page_spread">
<div class="page page_left">
<img src="https://i.pinimg.com/originals/42/49/b7/4249b7a08ae9f7d3a7e2586174e83867.gif" alt=" ">
</div>
<div class="page page_right">
<h1>Заголовок страницы 4</h1>
<p>Наполнение страницы 4</p>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const bookContainer = document.getElementById('book_container');
const pageSpreads = document.querySelectorAll('.page_spread');
const nextBtn = document.getElementById('next_page_button');
const prevBtn = document.getElementById('prev_page_button');
let currentPage = 0;
// Инициализация позиций
pageSpreads.forEach((spread, index) => {
spread.style.transform = `translateX(${index * 100}%)`;
});
function flipPage(direction) {
// Сразу убираем класс анимации (если был)
pageSpreads[currentPage].classList.remove('flipping');
// Логика смены страницы
if (direction === 'next') {
currentPage++;
if (currentPage >= pageSpreads.length) currentPage = 0;
} else {
currentPage--;
if (currentPage < 0) currentPage = pageSpreads.length - 1;
}
// МГНОВЕННОЕ обновление позиций
pageSpreads.forEach((spread, index) => {
spread.style.transform = `translateX(${ (index - currentPage) * 100 }%)`;
});
}
// Обработчики кликов
nextBtn.addEventListener('click', () => flipPage('next'));
prevBtn.addEventListener('click', () => flipPage('prev'));
// Клавиатура
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') flipPage('next');
if (e.key === 'ArrowLeft') flipPage('prev');
});
});
</script>
</body>
[/html]
Поделиться21Вчера 20:53:26
[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Переключаемые блоки</title>
<link rel="stylesheet" href="styles.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.slider-container {
position: relative;
width: 800px;
height: 500px;
overflow: hidden;
border: 1px solid #ddd;
border-radius: 8px;
}
.slides {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.4s ease-in-out;
}
.slide {
flex: 0 0 400px;
height: 100%;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: #fff;
}
.slide-image {
max-width: 300px;
max-height: 200px;
object-fit: contain;
margin: 15px 0;
}
.btn-prev, .btn-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 12px 16px;
cursor: pointer;
font-size: 18px;
border-radius: 50%;
z-index: 10;
}
.btn-prev {
left: 10px;
}
.btn-next {
right: 10px;
}
.btn-prev:hover, .btn-next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slides">
<!-- Блок 1 -->
<div class="slide">
<h2>Заголовок 1</h2>
<p>Текст первого блока. Здесь может быть любое содержимое.</p>
<img src="https://placehold.co/300x200" alt="Картинка 1" class="slide-image">
</div>
<!-- Блок 2 -->
<div class="slide">
<h2>Заголовок 2</h2>
<p>Текст второго блока. Можно добавить больше строк для проверки.</p>
<img src="https://placehold.co/300x200" alt="Картинка 2" class="slide-image">
</div>
<!-- Блок 3 (можно добавлять сколько угодно) -->
<div class="slide">
<h2>Заголовок 3</h2>
<p>Третий блок для демонстрации возможности расширения.</p>
<img src="https://placehold.co/300x200" alt="Картинка 3" class="slide-image">
</div>
<!-- Блок 4 -->
<div class="slide">
<h2>Заголовок 4</h2>
<p>Четвёртый блок — пример парного переключения.</p>
<img src="https://placehold.co/300x200" alt="Картинка 4" class="slide-image">
</div>
</div>
<button class="btn-prev">←</button>
<button class="btn-next">→</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const slides = document.querySelector('.slides');
const slideElements = document.querySelectorAll('.slide');
const btnPrev = document.querySelector('.btn-prev');
const btnNext = document.querySelector('.btn-next');
const slideWidth = 400;
const totalSlides = slideElements.length;
let currentIndex = 0;
// Функция обновления позиции (с жёстким позиционированием без наложений)
function updateSliderPosition() {
const offset = currentIndex * slideWidth;
slides.style.transform = `translateX(-${offset}px)`;
}
// Обработчик кнопки "вперёд"
btnNext.addEventListener('click', function() {
// Проверяем, есть ли хотя бы 2 слайда впереди
if (currentIndex + 2 <= totalSlides - 1) {
currentIndex += 2;
updateSliderPosition();
}
});
// Обработчик кнопки "назад"
btnPrev.addEventListener('click', function() {
// Проверяем, можно ли отступить на 2 слайда назад
if (currentIndex - 2 >= 0) {
currentIndex -= 2;
updateSliderPosition();
}
});
// Инициализация: показываем первые 2 слайда
updateSliderPosition();
});
</script>
</body>
</html>
[/html]
Отредактировано Cumvill (Вчера 20:58:05)
Поделиться22Сегодня 11:07:39
[html]<div class="slider-container">
<div class="slides">
<!-- Блок 1 -->
<div class="slide">
<h1>LOREM IPSUM</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor.<br><br>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br><br>
At vero eos et accusam et dolores et ea rebum.</p>
</div>
<!-- Блок 2 -->
<div class="slide">
<img src="https://i.pinimg.com/originals/42/49/b7/4249b7a08ae9f7d3a7e2586174e83867.gif" alt="Картинка 2" class="slide-image">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br><br>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor.</p>
</div>
<!-- Блок 3 -->
<div class="slide">
<h1>Et justo duo</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.</p>
<img src="https://upforme.ru/uploads/001c/82/f2/65/78058.png" alt="Картинка 1" class="slide-image-hr">
<p>Et justo duo dolores et ea rebum.<br>
At vero eos et accusam et justo,<br>
Sed diam nonumy eirmod tempor.<br>
Lorem ipsum dolor sit amet...</p>
</div>
<!-- Блок 4 -->
<div class="slide">
<img src="https://i.pinimg.com/originals/0f/26/7c/0f267cf2229db8b2d7a29bf96f16fc80.gif?nii=t" alt="Картинка 4" class="slide-image">
<p>At vero eos et accusam et justo.</p>
<img src="https://i.pinimg.com/736x/40/f2/de/40f2de1a93ade1c776505e2f2aab8c30.jpg" alt="Картинка 4" class="slide-image">
</div>
</div>
<button class="btn-prev" onclick="prevSlide()">←</button>
<button class="btn-next" onclick="nextSlide()">→</button>
</div>
<style type="text/css">
@font-face {
font-family: 'Kobzar_KS';
src: url('https://forumstatic.ru/files/0016/d8/85/45656.eot'),
url('https://forumstatic.ru/files/0016/d8/85/28433.woff') format('woff'),
url('https://forumstatic.ru/files/0016/d8/85/38752.ttf') format('truetype'),
url('https://forumstatic.ru/files/0016/d8/85/54587.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TrixiePro-Heavy';
src: url('https://forumstatic.ru/files/0016/d8/85/43723.eot'),
url('https://forumstatic.ru/files/0016/d8/85/30648.woff') format('woff'),
url('https://forumstatic.ru/files/0016/d8/85/15579.ttf') format('truetype'),
url('https://forumstatic.ru/files/0016/d8/85/84435.svg') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.slider-container {
position: relative;
margin: 0 auto;
width: 800px;
height: 500px;
background: url("https://forumstatic.ru/files/000d/19/7b/55725.png");
overflow: hidden;
border-radius: 8px;
}
.slides {
display: flex;
width: 100%;
height: 100%;
/*transition: transform 0.4s ease-in-out;*/
}
.slide {
flex: 0 0 400px;
max-height: 400px;
padding: 40px 40px 50px 40px;
display: flex;
overflow: hidden;
flex-direction: column;
justify-content: top;
align-items: center;
text-align: center;
background-color: transparent;
}
.slide-image {
max-width: 300px;
object-fit: cover;
margin: 15px 0;
}
.slide-image-hr {
width: 300px;
max-height: 30px;
object-fit: cover;
margin: 15px 0;
}
.btn-prev, .btn-next {
position: absolute;
top: 89%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.3);
color: white;
border: none;
padding: 6px 8px;
cursor: pointer;
font-size: 16px;
border-radius: 50%;
z-index: 10;
}
.btn-prev {
left: 190px;
}
.btn-next {
right: 190px;
}
.btn-prev:hover, .btn-next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
h1 {
font: 1.6em 'TrixiePro-Heavy' !important;
padding-bottom: 10px;
color: black;
}
h2 {
font: 15px 'Kobzar_KS' !important;
text-align: end;
color: black;
}
h3 {
font: 1.0em 'TrixiePro-Heavy' !important;
text-align: end;
color: black;
}
p {
font: 15px 'Kobzar_KS';
color: black;
line-height: 1.4;
}
</style>
<script>
let currentIndex = 0;
const slideWidth = 400;
function updateSlider() {
const slides = document.querySelector('.slides');
const offset = currentIndex * slideWidth;
slides.style.transform = `translateX(-${offset}px)`;
}
function nextSlide() {
const totalSlides = document.querySelectorAll('.slide').length;
if (currentIndex + 2 <= totalSlides - 1) {
currentIndex += 2;
updateSlider();
}
}
function prevSlide() {
if (currentIndex - 2 >= 0) {
currentIndex -= 2;
updateSlider();
}
}
// Инициализация при загрузке
document.addEventListener('DOMContentLoaded', updateSlider);
</script>
[/html]
Отредактировано Cumvill (Сегодня 11:35:44)
Страница: 1
