#SHAPESHIFTER.JS
##A SIMPLE SVG SHAPE MAKER
INSTRUCTIONS
Shapeshifter.js is really easy to use!
-
Download shapeshifter.js and place it in your scripts folder.
-
Call jQuery and the shapeshifter.js file on each page you'd like to use it.
-
Assign a unique id to the div you'd like to shapeshift in your HTML.
- Divs work best, although other elements can be shifted too.
- Something about classes.
-
In your main.js file (or in script tags), run the function .shapeshift() on the div you'd like to shapeshift, and pass the options object into the function. The code below includes all possible options in this version ;)
$('#div').shapeshifter({ shape: "hexagon", fill: "#303F9F", fillImage: "images/image.gif", multiplier: 2, rotation: -30, rotationOffset: "true" }); -
Re: the children of your shape,
###Options #####1. shape:"hexagon" (required) Accepts a string with one of the below shapes:
- hexagon
- star
- pentagon
- eqTriangle (an equilateral triangle)
- rectangle (actually a square, because just in case)
- rhombus (an rotated square)
- heptagon (seven sides)
- octogon
- nonagon
- decagon
- leftChevron
- rightChevron
- message
- rTriangleLeft
- rTriangleRight
#####2. fill:"#303F9F" (or fillImage required) Accepts a string with a hex, rgb, hsl value!
Will be overriden by fillImage if fillImage is used.
#####3. fillImage:"images/image.gif" (or fill required) Accepts the image path as a string. Set the path relative to the URL of the div you are shapeshifting.
Will override a fill colour.
#####4. rotation: -30 (not required) Accepts the degrees of rotation as a number. You can use negative AND positive rotation values. WHAT!
#####5. rotation (not required) Accepts a string of "true." Resets the contents of the shapeshifted div back to 0 degrees.
That's pretty much it! If you have any questions or suggestions, please email me at link
