What technologies was used for the site of the TV series darkness?

  • 0
    Good day! Need advice from experienced front-end developers.
    There is a site link
    Extremely curious from a visual point of view.
    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 & amp; ect.) But not a fact. It is quite possible that all this is written in vanilla technologies without the use of libraries and frameworks.
    I would be grateful for any hint
    JavaScript Cora Stein, Jun 27, 2020

  • 1 Answers
  • 0
    Extremely curious from a visual point of view.

    I would like to understand by what technologies it was made.

    Without looking at the code, one can assume the following technologies are used:

    1. Waves, abstract and in photographs, noise in the background - 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. Outline text in an oval, shamrock with a dotted line, arrows on the map - SVG, drawing a line according to this principle < / a>.

    3. Smooth transitions between screens can be done in different ways, even pjax forgotten by fashionable front-endors will be in place. You can check out barba.js - if not the most popular, then one of the popular tools for working with smooth transitions. You can use routers from SPA frameworks, it doesn't matter. The hardest part is getting everything in sync.

    4. 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 elements following the mouse, it is logical to assume that this is a banal CSS transformation on mousemove.

    6. Drawing arcs from points - it can be either SVG, as in step 2, only this line will be a mask, or you can build it like graphics .

    7. Well, there are some standard CSS animations too.

    Additional libraries here are a matter of taste, you can do everything in 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".

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!