CSS книга с перелистыванием страниц

Количество сайтов в интернете велико. Запомниться чем то уникальным и понравиться современному читателю сложно. Для этого надо искать какие то нестандартные шаги. Данная разработка позволяет визуально отражать информацию в виде 3D книги (​CSS книга с перелистыванием страниц). Количество страниц книги не ограничено. Разрешено вставлять текст и картинки ( тег «img»).

Фото CSS книги

CSS книга с перелистыванием страниц

Видео CSS книги

Описание CSS книги

При разработке мы сознательно отказались от поддержки браузера IE. При работе в браузере Google Chrome для Вас не будут действовать никакие ограничения. FireFox не сможет перелистывать страницу при нажатии на нее.

Блок управления для браузера Firefox.

<div id=»control»>

<a id=»pressLeft» href=»#»>Влево</a>

<a id=»pressRight» href=»#»>Вправо</a>

</div>

Браузер Firefox не может корректно определить какой объект нажат левой клавишей мыши. Эта проблема наблюдается  для случаев, расположения объектов друг над другом (position: absolute). При это Z-index верхнего объекта игнорируется.

Поэтому специально для него добавлены кнопки «Влево» и «Вправо».

Первая страница

<div class="page_project page-first page-open">
...
</div>

Первая страница должна иметь класс «page-first».

Последняя страница

<div class="page_project page-last page-open">
...
</div>

Последняя страница должна иметь класс «page-last».

Описание страницы CSS книги

<div class="page_project page-open">
   <div class="page_side_left">
      <div class="working_area">
         <p>
         ...
         </p>
      </div>
   </div>
   <div class="page_side_right">
      <div class="working_area">
         <p>
         ...
         </p>
      </div>
   </div>
</div>

Класс «page_project» присваивается всем страницам книги.

Класс «page-open» присваивается всем еще не перевернутым страницам.

Класс «page_side_left» и «page_side_right» присваивается левой и правой части страницы, чтобы создать 3D эффект.

Класс «working_area» предназначен для отступов на странице.

Старт CSS книги.

Все страницы будут расставлены по Z-index для корректного отображения.

В дальнейшем, после каждой операции переворота страницы книги, разработка будет пересчитывать z-index объектов.

После старта CSS книга выводит информационное сообщение и по таймеру удаляет его.

Скачать CSS книгу

Оставьте комментарий

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

17 + один =