In the first three years of my career, I’ve seen a lot of special effects on web pages (of course, I haven’t written them myself, so I can’t write them out). Today, I’m going to focus on some of the little effects I’ve seen with scrolling (or the effects of scrolling). Sometimes a page effect can really feel comfortable.

The Denver nuggets

I believe that many partners and I about the same, the first thing to go to work is ？？？？ Open the nuggets to see the boiling point. Wow, this little roll right here at the boiling point is pretty good. When you look down, the top navigation bar disappears and the top button appears in the lower right corner. The implementation of this special effect is certainly not difficult to our front-end ER. This is done when the scrollTop of the listening page reaches a certain value. But it’s very comfortable to use.

trello

The small effect of Trello is that there are three small bars, the scroll bar is on the far right, but the scroll bar is in the middle. Of course, position: Fixed can achieve this effect. Both Nuggets and Trello are about simple scrolling effects that are very easy to implement, mainly to show how comfortable the experience is.

Mobile promotional page

It is really an enjoyment to see the propaganda web page of dachang. When onePlus 7 was released (just for example, not for advertising) I went to its promotional website and was really surprised by its effect, is that the difference between the big guys and us? That’s when I started paying attention to the rolling effects. Scrolling, and scrolling alone, gives the page a sense of chaos. Experience it.

What struck me the most was that when I rolled to a certain point, the side of a mobile phone appeared in my view from the middle. Then, as I continued to scroll down, the mobile phone did not quickly roll to the top, but slowly turned from the side to the front, and it was very smooth, without any lag. Then continue to scroll, the phone still does not roll to the top, but slowly shrink and slide to the left, at the same time, the right side of the page to explain the phone awesome text. Scroll down at this point to scroll the phone to the top. I never thought there would be such special effects, but OF course I didn’t know anything about them. But seeing this effect for the first time really made me feel a lot and inspired me to find out how it works.

Through f12 debugging various split, the general principle is understood as follows:

There are many similar effects. It’s both masochistic and enjoyable to watch the big guys’ structural code.

Custom scroll bar

Baidu beautify the scroll bar, basically is based on Google browser scroll bar beautification. When you get to the Edge, you’re not Google. But really want to do their own beautification of the scrollbar how to do? Write your own. The idea is as follows:

While blogging, I improvised a custom scrollbar constructor, not guaranteed to be completely correct and optimized, just to show that there is such a thing to use.

conclusion

A post code only post pictures of the blog, I hope you have a help.

Original link:tech.gtxlab.com/scroll.html

* Author profile: Shuan Zhang, Renhe future big data front-end engineer, focusing on HTML/CSS/JS learning and development