Налаштуйте вигляд, параметри та поведінку вашого власного трейлу.
Ці опції можна передати у ваш GeneralAnimation.
{
"name": "Heart flower silhouette Custom Cursor Trail",
"image": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg",
"slug": "heart-flower-silhouette",
"url": "/collections/abstract/heart-flower-silhouette",
"pattern": "[\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\",\"<img src='https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg' width='32' alt='Heart flower silhouette Custom Cursor Trail' />\"]",
"animationType": "flash",
"duration": 1000,
"allImages": [
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
},
{
"id": 1,
"dataUrl": "https://cdn.custom-cursor-trails.com/uploads/1582630247wing_in_heart_freesvg_org_2c6b0d36aa.svg"
}
],
"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 і застосовувати як елементи для анімації курсора.
Рекомендуємо обрізати фото, зменшити роздільність і залишити прозорий фон.
