I would like to know the reason why this is done in order to play the video, spread the video to the entire screen width, and display the text according to scrolling.

I want to make the site move like this.

  • Answer # 1

    The one used on the reference page is like React
    But React for animation processing
    You ’re not directly involved

    From the point of view of how it works, I think I mainly use css transitions.

    If so, how to display the element details in the browser
    You should be able to see most of what makes that expression possible

    The rest is hint

    For the time being, to process the element according to scrolling
    I will do it in the scroll event of window
    Coordinate information is better than using the value of this event
    It is smoother to use getBoundingClientRect for each element

    Also, the animation is css transition animation rather than writing with js.
    If you do it in the direction of processing, it will be easier to respond responsively and it will be easier to handle.

    You can use interesting easing with jQuery animation,
    Code related to visual expression is scattered in css and js and management becomes troublesome

    Animation with React is pretty tough if you're not used to React
    What is shared through the components and what is different from mount to mount
    How far are the DOM objects the same?
    It's hard to animate with React if you don't know that.

    Especially when doing with React, animation
    Let's focus on css transition animation