CDivs

Adaptive and animated section dividers.
Use CDivs to create canvas dividers between sections.

0

Divider
Types

0

Divider
Decorations

How it works

Main work of the script

01. Element selection

The element containing a background is selected between two elements.

02. Element clipping

The element is clipped using clip-path CSS property.

03. Canvas dividers

Canvases containing a divider shape are added.

04. Canvas background

The elements background is reproduced on divider canvases.

Features

The script main features

Animation

Each type comes with a light animation that can be customized using options.

High DPI

Dividers automatically adjust to device pixel ratio.

Adaptive

Dividers sizes depend on screen size.
You can specify sizes and screen breakpoints by options.

Background

Dividers reproduce the element background.
Background color and position is automatically updated.

Types

The script contains 20 types that can be customize using options.

Decorations

The script contains 10 decorations, which represents cutting shapes from a divider.

Internal Elements

Dividers can contain CSS backgrounds of internal elements. Internal elements must be specified in the inners option.

Installation

To install the script, you need to include the script in the footer of your page.

You can add dividers by adding attributes or create, change and remove using JavaScript.

By default, internal elements do not participate in dividers. Internal elements added by specifying CSS selectors in the inners option.

By Attribute

By JavaScript

										...
										
											[t]<section [a]data-cdivs[/][e]=[/][s]"type: waves, decor: lines"[/]>[/]
										
										...
										
											[t]<script [a]src[/][e]=[/][s]"cdivs.min.js"[/]></script>[/]

										
											[t]<script [a]src[/][e]=[/][s]"cdivs.min.js"[/]></script>[/]
										
										
											[t]<script>[/]
										
										
											[T][t]window[/][d].[/][m]addEventListener[/][b]([/][s]'load'[/], () => [b]{[/]
										
										
											[T][T][l]let[/] [v]divider[/] = [s]new[/] [t]CDivs[/][b]([/][s]'#main-section'[/], [b]{[/]
										
										
											[T][T][T][p]type[/][d]:[/] [s]'waves'[/],
										
										
											[T][T][T][p]decor[/][d]:[/] [s]'lines'[/],
										
										
											[T][T][b]})[/];
										
										
											[T][b]});[/]
										
										
											[t]</script>[/]

Types

Here you can customize the divider and get its options.

Type

Decoration

Animation

Options

Attribute options

									type: skew

JavaScript options

									type: skew

Options

Options can be set both for all and for one divider.
Click on an option for a more detailed description and example.

breakpoints

Screen width breakpoints

size

Divider sizes

type

Divider type

semiTransparent

Semitransparent mode

inverted

Divider inversion

opacity

Opacity for divider gradient fading

underlay

Divider shift towards opposite element

inners

Inner elements that should be drawn on the divider

opposite

Select the opposite element if it has a background

bottom

Make a divider at the bottom of the element

scroll

Refresh dividers background while scrolling

scrollParent

Parent for scroll refresh

dur

Animation duration

startTime

Animation start time

timingFnc

Animation timing function

delay

Animation delay by X coordinate

strength

Animation coordinates multiplier

shift

Animation shift duration

scale

Main shape scale

segSize

Shape segments size multiplier

segFit

Shape segments fitting

addType

Type of additional shapes

addCount

Count of additional shapes

addOpacity

Opacity of additianal shapes

addSegFit

Segment fit of additonal shapes

addSegSize

Segment size multiplier of additional shapes

addDur

Animation duration of additional shapes

addStartTime

Animation start time of additional shapes

addStrength

Animation strength of additional shapes

addDelay

Animation delay of additional shapes by X coordinate

addShift

Animation shift duration of additional shapes

decor

Decoration type

decorFading

Fading type for decoration

decorOpacity

Decoration opacity

decorWidth

Decoration line width

Frequently Asked Questions

You can ask a question at any time on the item page.

What elements are suitable for dividers?

The script create dividers on HTML elements containing a CSS background.
The CSS background can be semitransparent and contain multiple images, linear and radial gradients, linear and radial repeating gradients.

Is it possible to create dividers on the <img> element?

<img> elements can be either main and internal elements.

Are CSS pseudo-elements suitable as internal elements?

Pseudo-elements can be specified as internal elements only if they are absolutely positioned.

Do dividers work with parallax?

Parallax based on CSS background-position or background-attachment property is automatically updated.
Parallax based on element position requires the scroll option to be enabled.

Type:
Default: