@bQ1

Как сделать подобный canvas?

Как сделать подобный canvas как на главной - https://120minutes.ca/ ?
Пошарил по статическим файлам, но там все перелопачено после вебпака
  • Вопрос задан
  • 79 просмотров
Пригласить эксперта
Ответы на вопрос 2
SeaInside
@SeaInside
15 лет пилю все эти штуки
Да довольно просто.
Весь канвас - это слегка переделанный "эффект из матрицы" (найдёте с десяток реализаций по запросу "js canvas matrix animation|effect", переделать готовый алгоритм не под символы, а под блоки чуть разного размера не должно стать проблемой).

UPD:
Да и что там перелопачено вебпаком? Вебпак - не обфускатор.
Открываем файл "main.min.js", прогоняем через любой "js beautifier online", в редакторе ищем "drops", находим два метода, которые хоть и форматированы в строку, но тем не менее достаточно понятны.

5e62192377585972779602.png
Ответ написан
Комментировать
daemonhk
@daemonhk
ПсиХоПат
Если про шар, который приближается во время скролла, то это не канвас:
1. Шар это png картинка
2. При скролле меняется transform, opacity у объектов (шар, желтые кривульки)
3. При скролле меняется контентная часть (их всего 4) - первые 3 меняются через видимость, 4ая скроллится, внутри нее все остальные блоки сидят.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы