Hexagon Background Generator With jQuery - Catanify
| File Size: | 3.75 KB |
|---|---|
| Views Total: | 1169 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
The Catanify jQuery plugin makes use of HTML canvas to create seamless, absolutely positioned hexagon backgrounds for any html containers.
How to use it:
1. Include the latest version of jQuery library (slim build) and the jQuery Catanify plugin's script at the bottom of the web page.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src="catanify.js"></script>
2. Add the CSS class 'catanify' to the target container in which you want to generate the hexagon background.
<body class="catanify"> <h1>Catanify</h1> </body>
3. That's it. To change the default colors, just override the following parameters in the catanify.js:
var sheepColor = [142, 188, 63]; var woodColor = [34, 149, 56]; var brickColor = [160, 107, 67]; var rockColor = [88, 97, 78]; var wheatColor = [239, 196, 92];
This awesome jQuery plugin is developed by JaredVargason. For more Advanced Usages, please check the demo page or visit the official website.
