# Створюйте в Hana інтерактивні дизайни, що реагують на мишу - Spline Academy (https://spline.design/uk/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

> У цьому відео ми зробимо вступ і покажемо різні приклади того, як за допомогою Hana перетворити дизайни на інтерактивний досвід, щоб вони реагували на…

1. [Академія](https://spline.design/uk/academy)
2. [Уроки](https://spline.design/uk/academy/tutorials)
3. Створюйте в Hana інтерактивні дизайни, що реагують на мишу

# Створюйте в Hana інтерактивні дизайни, що реагують на мишу

HanaПочатковий6 хв

У цьому відео ми зробимо вступ і покажемо різні приклади того, як за допомогою Hana перетворити дизайни на інтерактивний досвід, щоб вони реагували на курсор. Ми розглянемо події Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At і Follow та як за їхньою допомогою запускати анімації й ефекти.

## Чого ви навчитеся

1. [0:00Вступ](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=0s)
2. [0:15Робимо кліки – подія Mouse Down](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=15s)
3. [2:32Відпускаємо клік – подія Mouse Up](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=152s)
4. [2:46Утримуємо – подія Mouse Press](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=166s)
5. [2:56Магія наведення – подія Mouse Hover](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=176s)
6. [3:26Повертаємо дизайн до курсора – подія Look At](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=206s)
7. [4:51Дизайн стежить за курсором – подія Follow](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=291s)
8. [5:57Анонс наступного уроку](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=357s)

## Корисні матеріали

- [Interactive Flat IconsШаблон](https://app.spline.design/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana?redirect-duplicate-template-uuid=2a05e307-90dd-4666-bc8b-f2b7f3c2cce8&is-2d-file=true)
- [Designing in HanaДокумент](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in HanaДокумент](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Огляд

- Hana
- 6 хв
- Початковий

## Частина курсу

- [Hana | Усе, що потрібно знати](https://spline.design/uk/academy/collections/hana-everything-you-need-to-know/create-interactive-designs-that-react-to-your-mouse-with-hana)

## Схожі уроки

[Усі уроки](https://spline.design/uk/academy/tutorials)

[Створюйте інтерактивні ефекти з прогресивним розмиттям і плавними градієнтамиHanaПочатковий9 хв](https://spline.design/uk/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)[Додайте 3D-об’єктам взаємодії з мишеюSpline 3DПочатковий14 хв](https://spline.design/uk/academy/tutorials/add-mouse-based-interactions-to-3d-objects)[Як створювати 3D-візуалізації даних у Spline за допомогою змінних і API реального часуSpline 3DПросунутий15 хв](https://spline.design/uk/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

[Spline](https://spline.design/uk)

3D- і 2D-редактор для команд та їхніх агентів. Публікуйте у вебі, на iOS та Android.

#### Запитайте ШІ про Spline

#### Продукти

- [3D-дизайн](https://spline.design/uk/3d-design)
- [Hana](https://spline.design/uk/hana)
- [Omma](https://omma.build)
- [3D-генерація зі ШІ](https://spline.design/uk/ai-generate)
- [Spline MCP](https://spline.design/uk/mcp)
- [Spline Arena](https://spline.design/uk/arena)
- [Ціни](https://spline.design/uk/pricing)
- [Для бізнесу](https://spline.design/uk/enterprise)

#### Рантайми

- [Web](https://spline.design/uk/web)
- [iOS](https://spline.design/uk/ios)
- [Android](https://spline.design/uk/android)

#### Застосунки

- [Завантажити](https://spline.design/uk/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Завантажити Spline Mirror](https://spline.design/download-mirror)

#### Навчання

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/uk/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Рішення](https://spline.design/solutions)

#### Спільнота

- [Спільнота Spline](https://community.spline.design)
- [Blog](https://spline.design/uk/blog)
- [Що нового](https://spline.design/uk/changelog)
- [Освіта](https://spline.design/uk/education)
- [Contra](https://spline.design/contra)
- [Партнерська програма](https://spline.design/uk/affiliate)

#### Компанія

- [Клієнти](https://spline.design/uk/customers)
- [Вакансії](https://www.ycombinator.com/companies/spline/jobs)
- [Безпека](https://spline.design/uk/security)

#### Правова інформація

- [Умови використання](https://spline.design/terms)
- [Конфіденційність](https://spline.design/privacy)

#### Контакти

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.