Переворот карточки

Как работает расширение

• Вы создаете в Taptop контейнер с двумя вложенными блоками: лицевая и оборотная стороны.

• Вы настраиваете в генераторе параметры анимации: триггер, направление, стиль и скорость.

• Сгенерированный код автоматически активирует эффект переворота.

Как работать с инструкцией

Для настройки расширения вам нужно:

1. На платформе Taptop — подготовить блоки, назначить классы и оформить обе стороны карточки, а также вставить полученный код в настройках страницы.

2. В генераторе кода (в правой части страницы) — настроить параметры анимации и сгенерировать код.

Установка расширения на сайт

Шаг 1: Подготовьте карточку в Taptop

💡 Перед использованием генератора кода обязательно подготовьте правильную структуру элементов в редакторе Taptop. Некорректная структура — самая частая причина проблем.

1. Создайте основной блок-контейнер: Добавьте на страницу Div Block — это будет основной блок-контейнер, к которому будет применяться эффект переворота.

2. Задайте блоку-контейнеру уникальный CSS-класс: Например, my-flip-card или service-card-flipper.
   📌 Чтобы присвоить класс элементу:

   1. Выберите элемент, а затем на панели стилей в поле Источники стилей введите нужное название класса и нажмите Enter.

      

      Введите название класса

   2. Класс будет присвоен элементу и отобразится в поле Источники стилей.

      

      Класс присвоен элементу

3. Задайте размеры блоку-контейнеру: Укажите ширину и высоту для блока в панели стилей.
   Это необходимо для корректного отображения карточки.

   

   Для блока заданы ширина и высота

4. Создайте ДВА дочерних блока: Внутрь основного блока-контейнера добавьте ровно два дочерних блока (например, еще два Div Block).

5. Присвойте дочерним блокам CSS-классы:

   • Выберите первый дочерний блок и присвойте ему обязательный CSS-класс: flip-front.

     

   • Выберите второй дочерний блок и присвойте ему обязательный CSS-класс: flip-back.

     

     ⚠️ ВАЖНО! Соблюдайте именно такую структуру: один контейнер с вашим классом, и внутри него сразу два блока с классами flip-front и flip-back. Не добавляйте другие элементы между контейнером и этими двумя блоками. Стили для лицевой и обратной сторон карточки применяйте именно к классам flip-front и flip-back.

     

     Пример правильной структуры

6. Добавьте контент и стили:

   • Внутри блока с классом flip-front разместите весь контент для лицевой стороны (текст, изображения, кнопки и т.д.).

   • Внутри блока с классом flip-back разместите весь контент для обратной стороны.

   • Задайте стили (размеры, фон, цвет текста, отступы, рамки и т.д.) непосредственно блокам с классами flip-front и flip-back с помощью панели стилей.

     

     Первый дочерний блок flip-front будет лицевой стороной

     

     Второй дочерний блок flip-back будет обратной стороной

💡 Совет для удобства редактирования дочерних блоков в Taptop: Чтобы лицевая и обратная стороны карточки накладывались друг на друга в редакторе (а не располагались друг под другом), вы можете задать блоку с классом flip-back Абсолютное позиционирование и выставить значения отступов со всех сторон равным 0.

Абсолютное позиционирование, отступы 0

Шаг 2: Настройте параметры в генераторе и сгенерируйте код

1. Перейдите к генератору (в правой части страницы с данной инструкцией).

2. Настройте Целевой блок

   • Укажите CSS-класс основного блока-контейнера (например, my-flip-card).

   • Убедитесь, что внутри него есть только два дочерних блока с классами flip-front и flip-back.

3. Настройте анимации

   • Триггер переворота:

     • По клику

     • По наведению (на мобильных устройствах все равно будет использоваться клик)

   • Направление:

     • Горизонтально (влево–вправо)

     • Вертикально (вверх–вниз)

   • Скорость анимации:

     • Быстро (например, 500 мс)

     • Медленно (например, 1000 мс)

   • Стиль анимации:

     • Объемный 3D (с эффектом подъема)

     • Плоский 2D (без подъема)

4. Настройте 3D-эффекты и стиль

   • Скругление углов: Укажите радиус скругления в пикселях (например, 12).

   • Высота подъема (только для 3D): Настройте, насколько заметен объемный эффект (например, 25%).

5. Оцените результат в области предпросмотра.

6. Нажмите кнопку “Сгенерировать код”. Код будет автоматически скопирован в буфер обмена, и вы увидите уведомление.

Шаг 3: Вставьте код на сайт

1. Перейдите в Taptop и откройте настройки страницы: на вкладке Страницы нажмите иконку шестеренки рядом с названием нужной страницы.

   

2. В блоке "Перед тегом <body>" вставьте сгенерированный код.

   

3. Сохраните изменения на странице и опубликуйте ее (Ctrl+Shift+S).

Решение возможных проблем

❗️ Карточка не переворачивается / Расширение не работает

• Проверьте CSS-класс контейнера: Убедитесь, что указанный в генераторе класс в точности совпадает с классом, назначенным для основного блока-контейнера в Taptop (без точки, регистр важен).

• Проверьте классы лицевой и обратной сторон: Убедитесь, что дочерние блоки внутри контейнера имеют классы flip-front и flip-back. Проверьте на опечатки.

• Проверьте структуру: Убедитесь, что структура в Taptop соответствует описанной выше (Контейнер → flip-front + flip-back). Между контейнером и сторонами не должно быть других элементов.

• Код вставлен? Убедитесь, что сгенерированный код действительно вставлен в настройки страницы Taptop в блок "Перед тегом <body>".

• Страница опубликована? Изменения вступают в силу только после публикации.

• Ошибки в консоли: Откройте консоль браузера (F12 → Console) на опубликованной странице. Нет ли там ошибок, связанных с FlipCard или скриптом расширения?

❗️ Стили (фон, отступы и т.д.) не применяются к лицевой и обратной сторонам карточки

• Убедитесь, что вы применяете стили в редакторе Taptop непосредственно к блокам с классами flip-front и flip-back, а не к их родительскому контейнеру.

❗️ Карточка выходит за границы при горизонтальном перевороте

• В генераторе выберите Стиль анимации (Горизонтальный): "Плоский 2D (без подъема)". Это отключит 3D-эффект "подъема", который может вызывать эту проблему.

❗️ Несколько карточек на странице

• Один и тот же класс: Если вы используете один и тот же CSS-класс для нескольких контейнеров карточек, достаточно сгенерировать и вставить код один раз. Он автоматически применится ко всем элементам с этим классом.

• Разные классы: Если вы используете разные CSS-классы для разных карточек (например, для разных настроек анимации), вам нужно сгенерировать код для каждого класса отдельно и вставить все сгенерированные скрипты на страницу.

❗️ Странный 3D-эффект при наличии нескольких карточек рядом

• Чтобы получить наилучший визуальный результат с несколькими 3D-карточками, рекомендуется создать для них общий родительский контейнер в Taptop. Этому общему контейнеру нужно добавить Пользовательское свойство — perspective: 1000px. А каждому из ваших контейнеров карточек (my-flip-card и т.п.) — свойство perspective: none. Это создаст единую точку обзора и сбалансирует визуальный эффект.

📌 Чтобы добавить элементу пользовательское свойство:

1. Найдите на панели стилей раздел Пользовательские свойства и нажмите кнопку +.

   

2. Введите название свойства и его значение.