3D-открытка на JS+CSS

2763 просмотров Alan_Writer 05.09.2016

Еще один интересный как по мне скрипт - 3D-открытка, или книга. При нажатии на кнопку, ссылку, или картинку - экран плавно темнеет и одновременно по центру раскрывается открытка с небольшой текстовой информацией, а при нажатии на крестик или любую область вне открытки - закрывается. Думаю где-то это может найти применение.

Установка

1. Скачайте архив и залейте все содержимое в корень файлового менеджера.

2. В нижней части сайта пропишите следующие скрипты и стили:

Код

Также должна быть подключена библиотека jQuery, желательно не ниже версии 1.7.2.

3. В нужное место на сайте ставим кнопку, при нажатии на которую будет появляться открытка:

Код

<div class="button">Кнопка или картинка</div>

И сразу после нее сам блок открытки:

Код

<div class="modal">
<div class="front">
<img src="картинка-обложка.jpg">
</div>
<div class="back">
<div class="content">
<h1>Заголовок</h1>
<p>Текст</p>
</div>
</div>
<div class="opened">
<div class="content">
<h1>Заголовок (повтор)</h1>
<p>Текст (повтор)</p>
</div>
<div class="close"></div>
</div>
</div>
<div class="wrapper"></div>

Все.

Теги: книга, открытка, Animate, BooK, 3d

0 Комментариев