django-toolkit

v7.10.61

Published

a month ago

Набор инструментов Django

0High
0Medium
0Low

gladvalakas

django toolkit bubbles ripple cursor water effects animation canvas template-tag visual background

🧰 django-toolkit

Визуальные эффекты для Django без единой строчки JavaScript с вашей стороны.

Просто добавьте тег в шаблон — и получите живую страницу.

✨ Возможности

🫧 Плавающие пузырьки — анимированный фон с всплывающими кругами
🌊 Водяной след — круги, расходящиеся за курсором или при клике

📦 Установка

Через npm (если используете сборщик)

npm install django-toolkit

Через pip

pip install django-toolkit

Добавьте в INSTALLED_APPS

# settings.py
INSTALLED_APPS = [
    ...
    'django_toolkit',
]

🚀 Использование

1. Подключите теги в шаблоне

{% load toolkit_tags %}

2. Добавьте пузырьки на фон

{% bubbles count=20 color="#74b9ff" opacity="0.2" speed="slow" %}

3. Добавьте водяной след

{% ripple color="#ff6b6b" trigger="click" size="large" %}

Полный пример

{% load toolkit_tags %}

<!DOCTYPE html>
<html>
<head>
    <title>Мой сайт</title>
</head>
<body>
    {% bubbles count=25 color="#dfe6e9" opacity="0.3" speed="slow" %}
    {% ripple color="#00cec9" trigger="move" %}

    <h1>Добро пожаловать!</h1>
    <p>Двигайте мышкой — круги расходятся. Пузырьки плывут на фоне.</p>

</body>
</html>

⚙️ Параметры

`{% bubbles %}`

| Параметр | Тип | По умолчанию | Описание | |:---|:---|:---|:---| | count | число | 15 | Количество пузырьков | | color | hex | "#a29bfe" | Цвет пузырьков | | opacity | число | 0.2 | Прозрачность (0–1) | | speed | строка | "normal" | very-slow, slow, normal, fast, very-fast | | min_size | число | 5 | Минимальный размер (px) | | max_size | число | 40 | Максимальный размер (px) |

`{% ripple %}`

| Параметр | Тип | По умолчанию | Описание | |:---|:---|:---|:---| | color | hex | "#0984e3" | Цвет кругов | | size | строка | "medium" | small, medium, large | | trigger | строка | "move" | move — при движении, click — при клике | | fade_speed | число | 2 | Время исчезновения (сек) | | max_ripples | число | 20 | Максимум кругов одновременно | | line_width | число | 1 | Толщина линии круга |

🔧 Как это работает

Никакого JavaScript с вашей стороны
Никакой настройки Webpack/Vite
Никаких зависимостей кроме Django
Всё на чистом Canvas + requestAnimationFrame
Эффекты не мешают кликам и скроллу (pointer-events: none)

📄 Лицензия

MIT. Делайте что хотите — используйте в коммерческих проектах, модифицируйте, распространяйте.

🤝 Поддержка

Нашли баг? Есть идея? Создайте issue.

Сделано с ❤️ для Django-сообщества.