Creates a grid of cells with a collection of blocks randomly moving around from one cell to another.
<background-moving-blocks></background-moving-blocks>
square | If used then all the cells will be perfect squares. The last row of cells may not fit correctly and overflow. |
Default | Each of the default slot elements will be cloned a number of times into blocks that are then moved around the grid of cells. Plain text cannot be used, they must be elements. |
--fill-ratio | The ratio between the cells that are empty and those that contain a block. Percentage value between 1 and 90. |
--cell-row-count | The number of cell rows. This is only used if the attribute square is not set. |
--cell-column-count | The number of cell columns. |
--move-speed | The time it takes for a block to move from one cell to another (default is 1 second). |
--move-transition | The type of transition the block will move in (default is linear). |
--move-interval | The number of milliseconds between each block move (if possible). |
The slots you give can be styled however you like, but it must all be done with inline styling. Using classes will not work, as the class styling will not get through the web component's shadow DOM.
Here we are using the square
attribute which makes all the blocks perfectly square, no matter the size of the parent.
This will mean that the last row will not be show fully and will be cropped.
Doing this means we do not use the --cell-row-count
CSS variable as it is not needed.
Inside there are 5 DIV
tags, each will a different background color.
These default slot elements will be cloned multiple times to create the set of blocks that are then moved around.
The default slot elements are not used or shown directly, but hidden from view.
<background-moving-blocks square style=" width: 100%; height: 10rem; --cell-column-count: 30; --fill-ratio: 50; --move-speed: 0.25s; --move-transition: ease-in-out; --move-interval: 250;"> <div style="background-color: #f3732d;"></div> <div style="background-color: #f8961f;"></div> <div style="background-color: #f9c750;"></div> <div style="background-color: #287ea1;"></div> <div style="background-color: #44aa8b;"></div> </background-moving-blocks>
In this example we are moving SVG icons, one of which is set with a different fill color, white, to make it standout a little. We have also set the background color to a linear gradient.
<background-moving-blocks square style=" width: 100%; height: 15rem; background-image: linear-gradient( to top left, hsl(187, 100%, 71%), hsl(54, 100%, 50%)); --cell-column-count: 30; --fill-ratio: 60; --move-speed: 0.5s; --move-transition: ease-in-out; --move-interval: 100;"> <icon-column-line-chart style="fill: white;"></icon-column-line-chart> <icon-database-tick style="fill: #287ea1;"></icon-database-tick> <icon-ungroup style="fill: #287ea1;"></icon-ungroup> <icon-file1 style="fill: #287ea1;"></icon-file1> <icon-thumbs-up style="fill: #287ea1;"></icon-thumbs-up> <icon-exclamation-mark-diamond style="fill: #287ea1;"></icon-exclamation-mark-diamond> </background-moving-blocks>