# Створюйте в Hana інтерактивні дизайни, що реагують на мишу - 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/collections)
3. [Hana | Усе, що потрібно знати](https://spline.design/uk/academy/collections/hana-everything-you-need-to-know)
4. Створюйте в Hana інтерактивні дизайни, що реагують на мишу

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

Урок 5 з 15HanaПочатковий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 хв
- Початковий

## Далі

[Створіть 2D-взаємодію Follow8 хвПочатковий](https://spline.design/uk/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)[Продовжити](https://spline.design/uk/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)

[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.