jquery-slashes-and-circles) !Bower Version

$3

This is a tremendously basic plugin leveraging jQuery and TweenLite for a cool, swish opening animation. The only purpose I have for this plugin is for Jordsta.com and related materials, but I'm reusing it enough that I felt that it needed a plugin.

The animation on Jordsta.com comprises of an with a linear gradient, clipped by a few simple shape paths (slashes and circles). When the page is loaded, this plugin manipulates the , grabs each of the shape paths and animates it into a random position in the available space. The random position prevents any overlaps, and takes into account any absolute positioned elements on top of the (specified with the avoid parameter on plugin initialization).

Feel free to use and fork this plugin, but at the moment it's one-purpose, and heavily tied to the example HTML and TweenLite.

This is yet another jQuery plugin made with help from jQuery Boilerplate.

Usage

1. Include jQuery if you haven't already:

``html`

2. Include TweenLite and required plugins:

`html`

3. Slap in some SVG:

`html

4. Include jquery.slashes-and-circles.min.js:

`html`

5. Call the plugin:

`javascript $("svg#element").slashesAndCircles({ elements: $('.slashes, .circles'), // elements to animate avoid: [], // what elements the plugin should avoid allowAnimation: true // allow or deny animation });`

And you're done!

`Structure`

The basic structure of the project is given in the following way:

`├── demo/ │ └── index.html ├── dist/ │ ├── jquery.slashes-and-circles.js │ └── jquery.slashes-and-circles.min.js ├── src/ │ └── jquery.slashes-and-circles.js ├── .editorconfig ├── .gitignore ├── .jshintrc ├── .travis.yml ├── Gruntfile.js └── package.json``

#### demo/

Contains a simple HTML file to demonstrate your plugin. A better example should be viewable on the Jordsta.com website in the near future.

#### dist/

This is where the generated files are stored once Grunt runs.

#### src/

Contains the files responsible for your plugin, you can choose between JavaScript or CoffeeScript.

#### .editorconfig

This file is for unifying the coding style for different editors and IDEs.

> Check editorconfig.org if you haven't heard about this project yet.

#### .gitignore

List of files that we don't want Git to track.

> Check this Git Ignoring Files Guide for more details.