Descrição
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.
