Налаштуйте вигляд, параметри та поведінку вашого власного трейлу.
Ці опції можна передати у ваш GeneralAnimation.
{
"name": "Purple Pink Curly Stars Custom Cursor Trail",
"image": "https://cursor-trails.custom-cursor.com/uploads/curly_star_6_f82e95ba44.png",
"slug": "pirple-pink-curly-star",
"url": "/collections/sparkles-and-twinkles/pirple-pink-curly-star",
"pattern": "[\"<img src='https://cursor-trails.custom-cursor.com/uploads/curly_star_6_f82e95ba44.png' width='32' alt='Purple Pink Curly Stars Custom Cursor Trail' />\",\"<img src='https://cursor-trails.custom-cursor.com/uploads/curly_star_1_ebe69d1581.png' width='32' alt='Purple Pink Curly Stars Custom Cursor Trail' />\",\"<img src='https://cursor-trails.custom-cursor.com/uploads/curly_star_4_d72935610a.png' width='32' alt='Purple Pink Curly Stars Custom Cursor Trail' />\",\"<img src='https://cursor-trails.custom-cursor.com/uploads/curly_star_5_cf0ce5e029.png' width='32' alt='Purple Pink Curly Stars Custom Cursor Trail' />\",\"<img src='https://cursor-trails.custom-cursor.com/uploads/curly_star_3_236e3b8ffc.png' width='32' alt='Purple Pink Curly Stars Custom Cursor Trail' />\",\"<img src='https://cursor-trails.custom-cursor.com/uploads/curly_star_2_091498c1ae.png' width='32' alt='Purple Pink Curly Stars Custom Cursor Trail' />\",\"<img src='https://cursor-trails.custom-cursor.com/uploads/curly_star_1_ebe69d1581.png' width='32' alt='Purple Pink Curly Stars Custom Cursor Trail' />\",\"<img src='https://cursor-trails.custom-cursor.com/uploads/curly_star_4_d72935610a.png' width='32' alt='Purple Pink Curly Stars Custom Cursor Trail' />\",\"<img src='https://cursor-trails.custom-cursor.com/uploads/curly_star_2_091498c1ae.png' width='32' alt='Purple Pink Curly Stars Custom Cursor Trail' />\"]",
"animationType": "flash",
"duration": 1000,
"allImages": [
{
"id": 1,
"dataUrl": "https://cursor-trails.custom-cursor.com/uploads/curly_star_6_f82e95ba44.png"
},
{
"id": 1,
"dataUrl": "https://cursor-trails.custom-cursor.com/uploads/curly_star_1_ebe69d1581.png"
},
{
"id": 1,
"dataUrl": "https://cursor-trails.custom-cursor.com/uploads/curly_star_4_d72935610a.png"
},
{
"id": 1,
"dataUrl": "https://cursor-trails.custom-cursor.com/uploads/curly_star_5_cf0ce5e029.png"
},
{
"id": 1,
"dataUrl": "https://cursor-trails.custom-cursor.com/uploads/curly_star_3_236e3b8ffc.png"
},
{
"id": 1,
"dataUrl": "https://cursor-trails.custom-cursor.com/uploads/curly_star_2_091498c1ae.png"
},
{
"id": 1,
"dataUrl": "https://cursor-trails.custom-cursor.com/uploads/curly_star_1_ebe69d1581.png"
},
{
"id": 1,
"dataUrl": "https://cursor-trails.custom-cursor.com/uploads/curly_star_4_d72935610a.png"
},
{
"id": 1,
"dataUrl": "https://cursor-trails.custom-cursor.com/uploads/curly_star_2_091498c1ae.png"
}
],
"easing": "linear",
"shapesCount": 25,
"step": 2,
"theme": "dark"
}Введіть назву вашого набору слідів курсора.
Додайте зображення будь-яким зручним способом.
Оберіть тип анімації, розмір та інші параметри.
Покрокова інструкція зі створення, редагування та використання custom cursor і custom cursor trails у вашому застосунку або розширенні.
У полі "Назва" введіть зрозуміле ім’я майбутнього custom cursor trail (наприклад, Cosmic Sparkles), щоб легше знаходити в розширенні та керувати курсорними ефектами. Це допоможе організувати кілька різних custom cursor trails.
Додайте зображення для custom cursor trail трьома способами: 1) вставте URL, 2) завантажте файл із комп’ютера, 3) оберіть іконки зі своєї бібліотеки зображень. Підтримуються формати JPG, JPEG, PNG, WEBP, BMP, SVG; для найкращого вигляду радимо прозорі PNG або SVG. Оптимальні параметри: 64–128 px і вага до ~200–300 KB - так custom cursor trails працюватимуть плавно без просідань FPS. Якщо зображення за URL не підтягується через CORS, використайте завантаження файлу або вибір із бібліотеки. Ви можете комбінувати кілька іконок в один набір custom cursor trail і видаляти зайві елементи у будь-який момент.
Оберіть тип анімації, плавність (easing), розмір зображення (px) і тривалість ефекту (ms). Так ви зможете налаштувати вигляд і поведінку custom cursor trails відповідно до стилю вашого сайту чи розширення.
Переконайтеся, що custom cursor trail відображається коректно, і натисніть "Додати слід у розширення" або "Зберегти зміни". Після збереження оберіть потрібний custom cursor trail у вашому застосунку, щоб активувати ефект на будь-якому сайті.
Найпоширеніші запитання про створення і налаштування курсорних ефектів, роботу з власною базою зображень та оптимізацію анімації.
Підтримуються JPG, JPEG, PNG, WEBP, BMP, SVG. Рекомендуємо невеликі файли (до ~200–300 KB) та розміри іконок 64–128 px.
Виберіть пункт «Обрати з бібліотеки», щоб додати іконки зі своєї бази зображень.
Деякі сайти блокують завантаження зображень сторонніми застосунками через CORS.
Це не помилка застосунку, а політика безпеки на стороні хостингу.
Так. У режимі редагування змініть тип анімації, easing, розмір або склад зображень і натисніть «Зберегти зміни».
Після збереження набір з’являється у вашому розширенні чи застосунку. Оберіть його як активний.
За потреби швидко перемикайтеся між різними ефектами для A/B-тестів.
У налаштуваннях застосунку оберіть стандартний курсор без ефектів або видаліть набір.
Це дозволяє швидко перемикатися між різними варіантами курсора.
Так, можна завантажити фото у форматах JPG або PNG і застосовувати як елементи для анімації курсора.
Рекомендуємо обрізати фото, зменшити роздільність і залишити прозорий фон.
