arrow-left
Вернуться к продуктам
Кратко о видео
В уроке показана полная интеграция Spline в сайт: выбор объекта в библиотеке Spline, настройка адаптива (размеры под разные разрешения), включение интерактивности (вращение мышью, следование за курсором), экспорт и вставка через виджет. Показаны типичные проблемы с z-index. Spline экспортируется как iframe и вставляется через виджет «Пользовательский код» или встроенный виджет Spline в Taptop. 3D-объект рендерится в браузере через WebGL — на слабых устройствах может тормозить. Для мобильных рекомендуется делать менее детализированные сцены или заменять на видео. Урок для тех, кто хочет добавить WOW-эффект на сайт через 3D. Базовые знания Taptop нужны. Работа со Spline интуитивна — большого порога вхождения нет, если есть опыт в Figma или других визуальных редакторах.

Как добавить 3D-элемент на сайт в Taptop через Spline

Хочешь интерактивный 3D-объект на сайте — вращается за курсором, реагирует на движение. Где взять такой объект? Как встроить в Taptop без навыков 3D-моделирования?
Spline — онлайн-редактор 3D-графики с библиотекой готовых объектов. Объект настраиваешь и экспортируешь как iframe-код. В Taptop вставляется через виджет «Пользовательский код». Для тех, кто хочет добавить 3D без программиста. После просмотра встраиваешь 3D-объект на сайт и настраиваешь его поведение.
Тайминги видео
00:00 — Что такое Spline и зачем он нужен 01:00 — Выбор объекта из библиотеки, ремикс 02:30 — Адаптив в Spline: состояния для планшета и мобильного 04:00 — Настройки экспорта: камера, Orbit, onHover 05:30 — Копирование embed-кода 06:00 — Вставка кода в Taptop, структура секции 07:00 — Текст и изображения поверх 3D-элемента 07:45 — Адаптив в Taptop для текста и логотипа

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока