CDivs – Adaptive and Animated Canvas Section Dividers

CDivs – Adaptive and Animated Canvas Section Dividers

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.