Получить консультацию

Кратко о видео

В уроке разобрана интеграция Spline в Taptop: встройка 3D-сцены через iframe/виджет, видео с альфа-каналом (прозрачным фоном) как более лёгкая альтернатива тяжёлым 3D-сценам, работа с нестандартными лайаутами с наложением элементов. Видео с альфа-каналом рендерится в After Effects с прозрачным фоном и загружается в Taptop как обычный MP4 (WebM с альфой). Это даёт визуально сложный эффект без нагрузки WebGL на браузер — на мобильных работает стабильнее, чем Spline. Урок продвинутый — для тех, кто строит имиджевые сайты или портфолио с эффектными визуальными решениями. Базовые знания Taptop и опыт работы с видеоконтентом (After Effects или аналог) нужны. Для знакомства со Spline — посмотри базовый урок сначала.

Верстаем сайт с 3D-объектом через Spline в Taptop

Хочешь 3D-объект на сайте, который следует за курсором. Видел такое на сайтах агентств. Как реализовать это в Taptop? Что такое Spline и как его встроить?

Spline — редактор 3D с экспортом в веб через iframe. Вставляется в Taptop через виджет «Пользовательский код». Альтернатива: видео с альфа-каналом из After Effects — проще в реализации, поддерживает анимацию поверх любого фона. Для тех, кто делает портфолио или продуктовые лендинги. После просмотра добавляешь 3D-объект или видео с прозрачным фоном.

Тайминги видео

00:00 — Знакомство со Spline: что это и зачем 20:00 — Верстка хедера: структура и стилизация 50:00 — Интеграция Spline: встраивание 3D-сцены через кастомный код 1:10:00 — Видео с альфа-каналом: прозрачный фон на практике 1:40:00 — Z-index: текст и кнопки поверх 3D-объекта 2:00:00 — Итоги и ответы на вопросы