План создания сайта
1. Определение концепции
Цель сайта: Определить, что это будет (портфолио, лендинг, творческий проект).
Идея фона: Выбрать тип анимации (например, движущиеся частицы с линиями, волны, звёзды).
Стиль контента: Минималистичный дизайн, чтобы акцент оставался на фоне.
2. Подготовка структуры проекта
HTML:
Добавить элемент <canvas> для фона.
Создать контейнер для основного контента (например, <div class="content">).
CSS:
Сделать <canvas> полноэкранным с position: fixed и z-index: 1.
Настроить контейнер контента с z-index: 2, чтобы он был поверх фона.
Задать базовые стили для текста, кнопок и адаптивности.
JavaScript:
Подключить скрипт для работы с Canvas в отдельном файле или в <script>.
3. Настройка Canvas
Инициализировать Canvas:
Получить элемент <canvas> через JavaScript.
Установить размеры Canvas равными размерам окна браузера.
Добавить обработчик события resize для адаптации размеров Canvas.
Получить 2D-контекст (ctx) для рисования.
4. Разработка анимации фона
Создание объектов:
Определить класс для частиц (или других элементов анимации) с параметрами: координаты, скорость, размер, цвет.
Логика движения:
Задать случайное движение объектов (например, изменение координат с небольшой скоростью).
Ограничить движение краями экрана (отскок или возврат).
Взаимодействие объектов:
Реализовать соединение частиц линиями, если они находятся на заданном расстоянии.
Настроить прозрачность линий в зависимости от расстояния.
Реакция на мышь:
Отслеживать положение курсора через событие mousemove.
Изменять поведение частиц (скорость, размер) при приближении к курсору.
Отрисовка:
Использовать requestAnimationFrame для плавной анимации.
Очищать Canvas перед каждым кадром.
Рисовать частицы и линии с помощью методов ctx.
5. Добавление визуальных эффектов
Настроить свечение частиц с помощью shadowBlur и shadowColor.
Использовать градиенты или случайные цвета для разнообразия.
Добавить плавность движения (например, затухание скорости).
6. Размещение контента
Добавить заголовок, описание и кнопку в контейнер контента.
Настроить стили: полупрозрачный фон, контрастный текст, эффекты при наведении.
Убедиться, что контент читаем на фоне анимации.
7. Оптимизация
Ограничить количество объектов (например, частиц) для сохранения производительности.
Проверить работу на мобильных устройствах и адаптировать параметры (размеры, количество объектов).
Добавить fallback (например, статичный фон), если Canvas не поддерживается.
8. Тестирование и доработка
Проверить анимацию в разных браузерах.
Убедиться, что сайт загружается быстро и не тормозит.
При необходимости добавить дополнительные эффекты или упростить анимацию.