Shape dividers are trendy and modern looking design elements. They’re great to connect a visual content with a single colored section. For instance, this visual content could be a section with background image or video. Shape dividers can make a visual section look as if it has a unique and interesting shape. The truth is, shape dividers aren’t popular slider features, but they do make them amazing.
Description: Create a nice looking site by adding trendy shapes to your sliders which connect them with the section the shape touches.
Header slider with curved shape divider
The first slider on this page is a fullwidth slider with lots of layer animations. The basic idea was creating a portfolio slider, which has the shape divider on its bottom. The white color of the divider matches the background color of the section below the slider. This makes it seem like the curved shape is a part of the white section below. The slider has lots of nice layer animations which can catch the visitor’s attention. Yet, the white heading layer creates the most interesting effect. The layers are above the shape dividers, thus the white heading seems to be a part of the divider. We also set the parallax effect for the slide background images. The result is stunning, and it was easy to achieve it.
Animated shape divider to create movement on your site
This full width slider has 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.
Amazing scrolling effect on shape dividers
This animated block gives other, nice looking design ideas. In the meantime, it also shows how amazing the shape dividers are. There is a wave-like shape at the top of the slider, connecting it with the white section above. This shape highlights the oceanic theme of the whole slider. Below the top shape there is a heading layer with a nice animation. There are four counter layers after the heading, creating some extra movement on the slide. The block’s last element is a bottom shape divider. It also looks like a wave and moves continuously, just like the waves of a real ocean.
Carousel slider with shape divider
Simple and block type sliders aren’t the only slider types which support the shape dividers. As a matter of fact, every slider type supports it except the Accordion. The shape dividers are between the slide background and its layers in a Simple or Block slider. The Carousel and Showcase types work in another way: the whole slides are above the shapes. This makes it important to make the sliders high enough, to avoid the slides covering the shapes. This slider also uses animated wave-like shapes. The result is simply marvelous.