I want to implement such a page, what technologies do I need to use?

A novice at the front end, who knows about html and css for about a month and a half, wants to ask the gods to take a look at it. There is such a page as the first screen, text plus pictures, the first half of the text is fixed, the second half is typewriter effect, and the text content will change.
scroll down the screen, the picture in the first screen scrolls down with the screen, until the specified box in the second picture, it continues to be fixed, the screen continues to scroll down, and the position of the picture does not move, but if it scrolls up, the picture scrolls up again.

I would like to ask which technology applications need to be involved in order to achieve this effect, so that I can learn some knowledge in this area. Thank you.

Front-end javascript html5 css html

Mar.04,2021

The

scrolling and positioning section has a method that does not require js , but uses poor sticky, compatibility.
https://jsfiddle.net/z9yj4mq7/7/

for compatibility, listen for scroll events and calculate element spacing (Element.getBoundingClientRect ()), modification style). The typewriter part can use the timer (setInterval) to add text to the innerText of the dom. These api can be checked at MDN .

my answer is simpler than upstairs: since javascript, is not mentioned, go and learn it.

probably use the technology of
page layout,
js foundation, DOM foundation, js library reference,
js animation, js typing maneuver drawing,
event base, scroll event,
other basics: searching, viewing documents. No, no, no.
that's about it.

learn about sticky layout

Previous: About the problem of separating the data interface between the front and back end?

Next: There was an error installing brew install mongodb on Mac. Do you need to clear the historical data and reinstall it?

Table event bindings mouseover,td and table all go through, but tr does not trigger bubbles. I don't know why.
table binds mouseover, but bubbles do not trigger tr, directly from td to table related codes < table id= "t " > < tr > < td > 1 < td > < td > 2 < td > < td > 3 < td > < td > 6 < td > < tr > < tr > < td > 4 < td > < td > 5 < td > < td ...

Front-end javascript html5 css html

Mar.25,2021