When we scroll, the fixed wrapper will stay in place while we animate the inner content. The body will get the height of the content set to it, so that we preserve the scroll bar. Here you can also see how smooth scrolling with translating the content works: a content wrapper is set to position fixed with the overflow set to hidden so that its child can be moved. The Smooth scroll with skew effect demo shows how to add a skew effect to images while (smooth) scrolling. Jesper Landberg created some really great Codepen demos showcasing how smooth scrolling can be applied to different scenarios. To avoid that, we can use the trick of animating the content itself by translating it up or down instead of using the “native” scroll. Why is this kind of smooth scrolling something you’d like to add to a web page? If you have ever animated something on scroll, you might have experienced that browsers have difficulties in displaying the incoming content jank-free especially images may show tiny abrupt jumps on scroll. This kind of “inner” image animation adds another interesting layer to the whole scroll movement. The latter also has a very nice image animation that is synced with the scrolling. There are many beautiful examples of such smooth scrolling behavior on some recent websites, like Elena Iv-skaya, or Ada Sokół and the stunning site of Rafal Bojar, and many many others. With “smooth scrolling” we don’t mean smoothly scrolling to an element, but rather a smoothly animated kind of scrolling behavior. Today we want to show you how to add smooth scrolling in HTML with some additional subtle animations on images.
0 Comments
Leave a Reply. |