The Scroll divider example is a full-width slider with top and bottom shape dividers. In fact, it uses the same divider and the bottom one is flipped. This makes it seem as if the slider was rotated, while its background was not. The slider has a nice background animation for the images which makes the simple layer animation special. There are nice shape related animations at this slide as well. When you scroll downwards, the top shape gets bigger and the bottom gets smaller. The opposite happens when you start scrolling upwards. It’s a spectacular effect for you to use it on your sliders.
With a full width slider you can fill the horizontal width of your screen, but it doesn’t fill the height of the browser. The height of the full-width slider depends on the browser width, however in this example the maximum slider height is set to 500px. But it’s important to mention, when content editing mode is used, your slide’s height is based on the layers and all the slides’ height are based on your highest slide, even if you set a maximum height.
The Scroll divider slider has 2 heading layers, an animated area layer, a text layer and a great CTA button on the bottom. The area layer in this case has a separator role which has an incoming layer animation. This animation looks well with the background animation together, they are in harmony.
There are 4 options for navigation between the slides, you can simply drag, use the arrows, or you can use bullets, and you can navigate with your keyboard arrows as well.
There is the content mode used with a 1-row 1-col structure. The row has a little box shadow, and has rounded corners which you can set at the Layer window.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!
Related Post: 12 Beautiful Full Width Slider Examples