Ajax окно открытка в 3D плюс CSS
 | |
| Интересный по своим свойствам окно, которое идет как открытка, где вы нажимаете на ссылку или картинку на сайте и она разворачивается. В ней можно содержать любое описание и поместить под любую функциональность. Написать "Читать правило" и по клику здесь появляется красивый эффект окна, где разворачивается и идет заголовок и все правила описаны. Закрывать по стандарту, это при нажатие на крестиr, и также при эффекте она исчезает. Отличным решением будут на оригинальных сайтах с уникальным дизайн. Но также на простой ресурс установить можно и попробовать пользователей. Главное что там будет написано, но заранее под клик тему безусловно нужно задать, чтоб пользователь или гость знал что будет открывать и что он увидеть. Так что по применению этого материала можно найти, и нужно рассчитывать место при развороте, что учитывать здесь безусловно заранее предусмотреть.  Здесь вот предоставлено изображение, как мог снял, чтоб можно понять, как все будет работать. Приступаем к установке: 1. Нужно скачать архив и все что там находиться закинуть в файловый менеджер сайта. 2. Потом нужно пройти в низ сайта и прописать стили и файл js, чтоб на всех страницах работал. Код <link media="screen" href="/3dbook/style.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="/3dbook/3dbook.js"></script> Здесь нужно знать и проверить, чтоб на сайте была подключена библиотека jQuery, желательно не ниже версии 1.7.2. 3. Остается установить код, где будет эта открытка. Код <div class="button">Кнопка или картинка</div> И здесь не куда не уходим и сразу ниже пропишем скрипт, где будет описание, что открывается. Код <div class="modal"> <div class="front"> <img src="http://zornet.ru/avatar/00/00/00124071.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> Здесь вам нужно выбрать изображение небольшое, что под него сделано и по клику его появиться открытка, но можете под ссылку или название переписать. Источник: fullweb.ucoz.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
