InfinityGrid

Create an infinity grid in html wich can display random elements

Concept from:

https://codepen.io/radixzz/pen/eRJKXy

See 3 example

https://yoannchb-pro.github.io/InfinityGrid/index.html.

Basic image

How to use ?

//Without node its:
new Grid({
  json
})

//With node
const grid = require('infinity-grid');
 
const simple = grid.Grid({
  width: 200, //width of one block
  height: 120, //height of one block
  mouse: true, //disable or enable the mouse (default = true)
  zoom: true, //disable or enable the zoom (default = false)
  animation: { //set up an animation
    velocityX: 1, velocity y for each block
    velocityY: 0, //velocity x for each block
    time: 10 //interval refresh
  },
  body: document.querySelector('#simple'), //wich element you want to transform in infinity grid ?
  createElementFunction: createElement //each new element wich be create
});

Example

const createElement = async () => {
  let r = Math.round(Math.random()*255));
  let g = Math.round(Math.random()*255));
  let b = Math.round(Math.random()*255));
  let c = document.createElement('div');
  c.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
  c.style.width = "100%";
  c.style.height = "100%";
  return c;
}
                    
const animate_with_mouse = grid.Grid({
  width: 200,
  height: 120,
  mouse: true,
  animation: {
    velocityX: 0.5,
    velocityY: 0.5,
    time: 10
  },
  body: document.querySelector('#animate_with_mouse'),
  createElementFunction: createElement
});