VariusRain
@VariusRain
музыкант-программист-конструктор

На каких технологиях создан сайт сериала тьма?

Всем доброго времени суток! Нужен совет опытных фронтэндеров.
Есть сайт ссылка
Крайне любопытен с точки зрения визуальной составляющей.
Мне бы хотелось понимать, посредством каких технологий он был сделан.
Я могу лишь предполагать, что это какой-то JS фреймворк (React, Angular & ect.) но не факт. Вполне возможно, что это всё на ванильных технологиях написано без применения библиотек и фреймворков.
Буду благодарен за любую подсказку
  • Вопрос задан
  • 414 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега JavaScript
UI developer. Верстаю неверстаемое.
Крайне любопытен с точки зрения визуальной составляющей.
Мне бы хотелось понимать, посредством каких технологий он был сделан.


Не глядя в код, можно предположить использование следующих технологий:
  1. Волны абстрактные и на фотографиях, шум на фоне - WebGL, шейдеры. Вода на первом экране - скорее всего моделируется как идеальная жидкость, волны на фотографиях - чисто геометрические.
  2. Обведение текста в овал, трилистник с пунктиром, стрелки на карте - SVG, рисование линии по такому принципу.
  3. Плавные переходы между экранами можно делать по-разному, даже забытый модными фронтендерами pjax будет к месту. Можно познакомиться с barba.js - это если не самый популярный, то один из популярных инструментов для работы с плавными переходами. Можно использовать роутеры из SPA-фреймворков, не принципиально. Самое сложное здесь - все синхронизировать.
  4. Карта с персонажами - это может быть обычная верстка, подложенная под канвас с шумом. Самый простой вариант.
  5. Есть небольшое покачивание элементов вслед за мышкой, логично предположить, что это банальная CSS-трансформация на mousemove.
  6. Рисование дуг из точек - это может быть либо SVG, как в п.2, только эта линия будет маской, либо можно это строить как графики.
  7. Ну и немного стандартных CSS-анимаций там тоже есть.


Дополнительные библиотеки здесь - дело вкуса, можно и на ванильном JS все сделать, разве что роутер я бы взял готовый. Вся соль в визуальных эффектах, а для них готовых решений не будет, если работа будет строиться по принципу "сначала придумать, потом сделать".
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Акти Краснодар
от 50 000 до 80 000 ₽
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
29 нояб. 2020, в 01:16
500 руб./за проект
29 нояб. 2020, в 00:50
800 руб./за проект