3D Flip — это скрипт, с помощью которого вы можете разместить информацию на обеих сторонах карточки — при наведении курсора она будет переворачиваться. К примеру, на обратной стороне можно настроить блок с описанием, формой заявки, акцией и пр. Также, использовав flip-эффект, можно оформить страницу штата сотрудников: на задней стороне фотографии добавить блок с контактными данными, обратной связью. Переворачивающийся эффект при наведении на карточку (flipping эффект) — это современный и красочный подход для оформления вашего сайта!
Исходный код
Файлы body.html и head.html откройте в текстовом редакторе Блокнот.
В настройках страницы добавьте новый плагин и назовите его «3D Flip».
Скопируйте в HEAD стили из файла head.html
Скопируйте в BODY исходный код из файла body.html
|
1 2 3 4 5 6 7 8 9 10 |
<script> //*3D Flip*/ $(document).ready(function(){ $('.hover').hover(function(){ $(this).addClass('flip'); },function(){ $(this).removeClass('flip'); }); }); </script> |
Редактор
Добавьте новый Блок и задайте ему class="hover panel right". Здесь вместо right могут быть другие классы. Подробнее читайте в разделе Параметры.
Он будет родительским контейнером.
Теперь внутрь родительского добавьте еще один Блок и задайте class=front
Он показывается по умолчанию, т.е. это фронтальный блок.
Внутрь родительского контейнера, ниже фронтального добавьте еще один Блок и задайте class=back.
Этот блок появляется при наведении курсора (оборотная сторона).
Добавьте контент в эти блоки: фронтальный и оборотной стороны.
Опубликуйте и проверяйте.
Параметры
Вы можете выбрать тип анимации из 4 вариантов. Для этого для родительского блока задайте один из перечисленных классов:
right — анимация разворота слева направо;
left — анимация справа налево;
up — анимация снизу вверх;
down — анимация сверху вниз.
