N
N
Nikolay Alekseev2020-10-19 15:52:08
JavaScript
Nikolay Alekseev, 2020-10-19 15:52:08

On what technologies was the website of the series dark created?

Good day to all! Need advice from experienced front-end developers.
There is a site link
Extremely curious from the point of view of the visual component.
I would like to understand by what technologies it was made.
I can only assume that this is some kind of JS framework (React, Angular & ect.) but not a fact. It is quite possible that all this was written on vanilla technologies without the use of libraries and frameworks.
I would be grateful for any hint

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Ivan Bogachev, 2020-10-19
@VariusRain

Extremely curious from the point of view of the visual component.
I would like to understand by what technologies it was made.

Without looking at the code, we can assume the use of the following technologies:
  1. Abstract waves and photographs, background noise - WebGL, shaders . The water on the first screen is most likely modeled as an ideal liquid, the waves in the photographs are purely geometric.
  2. Outlining text in an oval, shamrock with a dotted line, arrows on the map - SVG, drawing a line according to this principle .
  3. Smooth transitions between screens can be done in different ways, even pjax forgotten by fashionable front-enders will be in place. You can get acquainted with barba.js - this is, if not the most popular, then one of the most popular tools for working with smooth transitions. You can use routers from SPA frameworks, it doesn't matter. The hardest part here is synchronizing everything.
  4. A map with characters - this can be a regular layout, placed under the canvas with noise. The easiest option.
  5. There is a slight wiggle of the elements following the mouse, it is logical to assume that this is a banal CSS transformation on mousemove.
  6. Drawing arcs from points - this can be either SVG, as in paragraph 2, only this line will be a mask, or you can build it as graphics .
  7. Well, there are also some standard CSS animations.

Additional libraries here are a matter of taste, you can do everything on vanilla JS, except that I would take a ready-made router. All the salt is in the visual effects, and there will be no ready-made solutions for them if the work is built on the principle of "first think, then do".

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question