CDivs – Adaptive and Animated Canvas Section Dividers

Description

CDivs is a script that makes it easy to insert adaptive and animated canvas dividers between HTML sections.

How it works:

The element containing a background is selected between two elements.
The element is clipped using clip-path CSS property.
Canvases containing a divider shape are added.
The elements background is reproduced on divider canvases.

Features:

20 divider types
10 divider decoration types
Light animation for each divider type
Flexible settings
High DPI support
Adaptive divider sizes
Drawing internal elements

Changelog:

Version 2.0.4 – 10 April 2023

- Added code examples
- Added ignoreTransparency option
- Fixed shift option in attribute
- Fixed opposite option
- Fixed canvas position calculation

Version 2.0.3 – 13 June 2022

- Fixed setDefaultOptions method
- Fixed shared destruction
- Fixed background attachment calculation
- Removed unused code

Version 2.0.2 – 21 January 2022

- Added a builder, with which you can build the script with the necessary modules and divider types.

Version 2.0.1 – 17 January 2022

- Added priority for element styles, to prevent divider overlap in certain cases

Version 2.0.0 – 30 August 2021

- The method of work has changed
- Attributes replaced by a single attribute with options

- Added option to change screen breakpoints
- Added support for IntersectionObserver to process only visible dividers
- Added support for internal elements
- Added support for <img> elements
- Added automatic change of background color, size and position based on events
- Added options for redrawing the position of internal elements according to the scroll event
- Added methods for creating and destroying dividers
- Added method to change options for already created dividers

- Reworked divider types
- Added options for divider types customization
- Added additional options for animation customization
- Added divider decorations, which are cutting a pattern out of the divider
- Added options for divider decoration types customization

- Fixed the accuracy of background reproduction
- Added support for radial, repeating linear and repeating radial gradients
- Added support for semi-transparent elements
- Added support for semi-transparent background gradients

Version 1.0.3 – 31 March 2020

- Now blocks will inherit `z-index` CSS property of internal dividers. This can be turned off with the option `blocksZIndex`.

Version 1.0.2 – 30 March 2020

- Now dividers will be placed inside the blocks to follow their position.
- Added automatic update of dividers when dynamically resizing blocks.
- Minor bugs fixed

Version 1.0.1 – 26 March 2020

- Fixed canvas position calculating.
- Fixed block background stretch calculating.
- Fixed gradient drawing.
- Added 6 new divider types.
- Added additional options and attributes.
- Added automatic using of drawing single block when only one block is near the divider.
- Added a builder, with which you can build the script with the necessary modules and divider types.