jQuery Plugin To Make Your Elements Look Like A Jigsaw - jJigsaw

jJigsaw is a jQuery plugin to create a jigsaw effect on an element,which is useful for stylishness. It mainly uses CSS border tricks and position tricks to achieve the effect, without using any image, which enables us to create this kind of effect of any size.

See also:

• jQuery Plugin To Add A Folded Paper Corner To An Element - jCorner

How to use it:

1. Import both jQuery library and the jQuery jJigsaw plugin's script into the html document.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="js/jJigsaw.js"></script>

2. Suppose we want to add this jigsaw effect to an element with id jigsaw in the HTML, jJigsaw makes it as simple as:

<div id="jigsaw"></div>

$('#jigsaw').jJigsaw();

3. There're 4 parameters to set with jJigsaw, none of which is compulsory. If your web page had set the background-color property of body element,jJigsaw will set the same color value of the bgcolor parameter automatically.

• bgcolor: In order to make your elements have this jigsaw effect,you had better ensure the bgcolor parameter is set to be the same value of your elements' container.
• bdcolor: This parameter defines your elements' shadow effect,bdcolor is set to be the shadow's color.
• bdwidth: You may want to control the size of shadow in pixels,that's exactly what this parameter do.
• holerate: Well,I have to admit that it's hard for me to explain the usage of this parameter.The larger it is , the smaller the holes of your jigsaw it will be.

$('#jigsaw').jJigsaw({
  bgcolor:$bodybgc,
  bdcolor:"#cccccc",
  bdwidth:5,
  holerate:8
});

4. If your element have child element,you had better set some CSS properties such as margin for a better effect. Besides,if you have set the background-image property for your element,please do as follows:

#jigsaw{
  background:url(bg.jpg) no-repeat 0 0;
  background-size:100% 100%;
}

---

This awesome jQuery plugin is developed by WQQWQQ. For more Advanced Usages, please check the demo page or visit the official website.