Замечательный анимационный эффект переворачивания блоков - для вашего сайта, блога, портфолио - предлагает
Luca Manno; для работы плагина необходимы
jQuery и
jQuery ui. В настройках возможно изменить скорость анимации. Демо плагина смотрим
на страничке автора
, там же - подробное описание и бесплатная загрузка плагина.
А сейчас - краткая аннотация.
Устанавливаем скрипты, стили и html:
Code:
<link rel="stylesheet" type="text/css" href="flip.css">
<script src="jquery.js"></script>
<script src="jquery-ui-1.7.2.custom.min.js"></script>
<script src="flip.js"></script>
<script src="jquery.flip.min.js"></script>
<div id="flipbox">Название блока</div>
<div id="flipPad">
<a href="#" class="left" rel="rl" rev="#777" title="Название 1">Кнопка 1</a>
<a href="#" class="top" rel="bt" rev="#7A7C54" title="Название 2">Кнопка 2</a>
<a href="#" class="bottom" rel="tb" rev="#82BD2E" title="Название 3">Кнопка 3</a>
<a href="#" class="right" rel="lr" rev="#0A93C1" title="Название 4">Кнопка 4</a>
<a href="#" class="revert">Кнопка 5</a>
</div>
Плагин корректно работает во всех современных версиях браузеров.