FURNITURE
Shape Divider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes.

COFFEE SHOP
Shape Divider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes.

STEAK BISTRO
Shape Divider

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes.

ArrowArrow
ArrowArrow
Slider

Shape Divider

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.

Shape Divider

Description: Create a nice looking site by adding trendy shapes to your sliders which connect them with the section the shape touches.

Tags: , ,

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.

Slider

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.

Shape Divider
ANIMATED DIVIDERS

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Shape Divider
ANIMATED DIVIDERS

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Shape Divider
ANIMATED DIVIDERS

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Slide 3
Slide 2
Slider

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.

Read More
100 Squat Challenge
Written by
Frank Stiller
Read More
An Introduction To Yoga!
Written by
Emily Musso
Read More
The Facts About Protein, Carbs & Fat
Written by
Pamela Jolly
Read More
5 Ways To Break A Fitness Plateau
Written by
Tiffany O'Connell
Read More
Lift Like This And Grow Forever!
Written by
James Lockridge
Read More
10 Muscle-Building Fast-Food Options!
Written by
Victoria Cohen
Read More
The Most Underrated Core Blaster Exercise!
Written by
Pamela Jolly
Arrow
Arrow
Slider

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.

Similar Sliders -

Orion Page GroupShape Divider – Shape Divider BlockShape Divider – Scroll DividerShape Divider – Carousel Divider