» »

Ajax окно открытка в 3D плюс CSS

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
05.07.2017 Загрузок: 2 Просмотров: 483 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
Critic©
Critic© 05.07.2017 19:471
0
Нормальное ajax окно понравилась идея с затемнением экрана возле открытки
Kosten
Kosten 05.07.2017 21:002
0
Типа книжки ajax окно, как перелистывает листок, но думаю немного грузить будет, но всегда, если что то с красивым эффектом, то грузит, но это окно немного будет на счет давление, не заметно можно сказать.
avatar