https://github.com/projetsmerlin/grillage
grillage.js : ma première librairie JS
https://github.com/projetsmerlin/grillage
jslibrary
Last synced: about 1 year ago
JSON representation
grillage.js : ma première librairie JS
- Host: GitHub
- URL: https://github.com/projetsmerlin/grillage
- Owner: ProjetsMerlin
- Created: 2021-11-10T16:11:11.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-05T21:47:17.000Z (almost 4 years ago)
- Last Synced: 2025-02-04T12:04:59.247Z (over 1 year ago)
- Topics: jslibrary
- Language: JavaScript
- Homepage: https://projetsmerlin.github.io/Grillage/
- Size: 404 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Grillade JS
-------
Grillage js décompose une image en plusieurs éléments HTML pour lui donner un effet de grille ou de quadrillage (sur 3 lignes en hauteur). Il est ensuite possible d'appliquer une classe de son choix sur chacun des éléments pour leur attribuer un effet d'animation par exemple ou de transition lorsqu'on les survole.
### Demo
You can preview Grillage js [there](https://projetsmerlin.github.io/Grillage/)
### How TO USE
1. Wrap your image with an html element
2. Import jQuery
3. Import Grillage js
4. Aplly Grillage on your element
5. Apply options if you want
### Example
#### CSS (no required)
```bash
```
#### SCRIPTS
```bash
```
#### Grillage js
```bash
$('.yourElement').grillage({
structure : [
[33.33,33.33,33.33],
[20,20,30,30],
[20,50,20,10],
],
classe : 'grillage__item'
classHover: "grillage__item--hover",
borderColor: "yellow",
borderSize: 3,
});
```
### Settings
Option | Type | Default | Description
------ | ---- | ------- | -----------
structure | array | [ [15,15,50,20],[20,20,30,30],[20,70,10],] | Structure of grid. An array for each rows. Each values must be equal to 100% for a perfect design
classe | string | 'grillage__item' | name of your classe
classHover | string | 'grillage__item--hover' | Classe of animate css for hover effect
borderColor | string | '#ffffff' | Color of borders
borderSize | int | 3 | width of borders
### Download
You can download Grillage js [there](https://github.com/ProjetsMerlin/grillage/archive/refs/heads/master.zip)
### Credits
Created by https://lintermediaire.be - 12/2021
### Dependencies
jQuery 3.6.0 - [https://jquery.com/download/](https://jquery.com/download/)
### Related
[animated.css](https://github.com/amitmerchant1990/markdownify-web) for a lot css animation
### License
FREE
---