https://github.com/yoannchb-pro/infinitygrid

Create an infinity grid in html wich can display random elements
https://github.com/yoannchb-pro/infinitygrid

css grid html infinity js yoannchb

Last synced: about 1 month ago
JSON representation

Create an infinity grid in html wich can display random elements

• Host: GitHub
• URL: https://github.com/yoannchb-pro/infinitygrid
• Owner: yoannchb-pro
• License: apache-2.0
• Created: 2020-09-19T15:35:55.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-10-08T18:26:51.000Z (over 5 years ago)
• Last Synced: 2025-09-13T07:31:34.065Z (9 months ago)
• Topics: css, grid, html, infinity, js, yoannchb
• Language: JavaScript
• Homepage:
• Size: 1.38 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 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 ?

```js

const simple = new 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

```js

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 = new Grid({

  width: 200,

  height: 120,

  mouse: true,

  animation: {

    velocityX: 0.5,

    velocityY: 0.5,

    time: 10

  },

  body: document.querySelector('#animate_with_mouse'),

  createElementFunction: createElement

});

```