javascript - A small effect on the mobile terminal

Question

Scroll down and the background image shrinks.

Question: How to write this animation more smoothly (mobile version),

Answer 1

If you want the animation to be smooth, you can add css attributes to the DOM element where the animation is located: transition: all .8s ease;

Syntax: transition: property duration timing-function delay
transition-property: specifies the css property name for setting the transition effect
transition-duration: specifies how many seconds or milliseconds it takes to complete the transition effect
transition-timing-function: specifies the transition function, stipulates The speed curve of the speed effect
transition-delay: Specify the delay time before the onset of appearance
The default values ​​are: all 0 ease 0

Answer 2

The requirements are not clear. When scrolling up, slowly cover the top background image at the back, and finally keep half of the background image visible. If this is the case, there is no need to do animation