Первый экран сайта
Первый экран, который выглядит как дорогой студийный сайт
Концепт главной страницы отраслевого форума: рельеф из частиц, появление блоков, счётчики. Всё это 17 КБ кода без сторонних библиотек. Ниже рабочая версия, подвигайте курсором по фону.
- Задача
- Концепт для организатора отраслевого форума: первый экран, ссылку на который не стыдно отправить партнёрам. Уровень дорогой студии, но без её бюджета и без тяжёлых библиотек, которые тормозят сайт.
- Решение
- Нарисовал рельеф из точек и собрал анимации на встроенных средствах браузера: появление блоков, счётчики, реакция карточек на курсор. Сторонних библиотек нет.
- Что получает владелец
- Концепт первого экрана за два дня работы
- Страница весит меньше одной фотографии
- Анимации уважают настройку «меньше движения»
- Экран переносится на рабочий сайт без переделки
- Стек
- Canvas 2D
- IntersectionObserver
- TypeScript
- SCSS
- Astro для сборки
Как устроено
Рельеф из точек рисуется прямо в браузере и реагирует на курсор. Сторонних библиотек нет: 17 КБ кода, плавно даже на обычном ноутбуке.
Заголовок, подзаголовок, цифры и кнопки выходят с задержкой в сотню миллисекунд друг за другом. Эффекты складываются в одну сцену и не спорят друг с другом.
Счётчики участников и компаний стартуют, когда блок попадает в экран, поэтому посетитель видит, как набираются цифры.
При системной настройке «меньше движения» анимации выключаются, страница остаётся читаемой и быстрой.
Соберу под ваш сайт: мероприятие, компания, продукт. Сначала концепт одного экрана, чтобы увидеть результат до оплаты всего проекта.
Напишите в чате на Профи.ру, что за проект и к какому сроку. В ответ пришлю смету по пунктам.