Download Now

CDivs – Adaptive and Animated Canvas Dividers of Blocks

Canvas Dividers is a script that makes it easy to insert adaptive and animated canvas dividers between html blocks.

How it works:

  • The script stretches the backgrounds of the html blocks between which the divider will be located.
  • Next the canvas element is placed between these blocks
  • Next the background of the previous block is drawn on canvas.
  • Last step is shape is drawn on canvas with the background of the next block.

Features:

  • 39 divider types
  • Light animation for each type
  • Possibility to add your own custom divider
  • Flexible settings
  • Cross browser support
  • Retina support

Limitations:

The script copies only the background of the block, all internal elements are not drawn on the canvas. There is a separate attribute and option that will allow you to draw only the background of the previous or next block to partially get around this limitation.
Also not supported css `background-attachment` property.

Changelog:

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 a script with the necessary modules and divider types.

Download Now