Animate random slashes and circles in a clipPath area of an SVG, avoiding certain areas.
npm install jquery-slashes-and-circlesThis 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.
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!
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.
#### .jshintrc
List of rules used by JSHint to detect errors and potential problems in JavaScript.
> Check jshint.com if you haven't heard about this project yet.
#### .travis.yml
Definitions for continuous integration using Travis.
> Check travis-ci.org if you haven't heard about this project yet.
#### Gruntfile.js
Contains all automated tasks using Grunt.
> Check gruntjs.com if you haven't heard about this project yet.
#### package.json
Specify all dependencies loaded via Node.JS. This includes jQuery and GSAP.
> Check NPM for more details.
Check CONTRIBUTING.md for more information.
Check Releases for detailed changelog.