jquery-slashes-and-circles

当前版本: 0.1.0


jquery-slashes-and-circles是什么?

在svg的clippath区域中设置随机斜杠和圆圈的动画效果,v表示某些区域。
Animate random slashes and circles in a clipPath area of an SVG, avoiding certain areas.

许可协议

MIT

关键词

jquery-plugin , jquery , plugins

安装方式

npm install jquery-slashes-and-circles@0.1.0

相关网址


jquery-slashes-and-circles使用说明

jQuery slashesAndCircles Build Status Bower Version

Animate random slashes and circles in a clipPath area of an SVG, avoiding certain areas.

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 <svg> with a linear gradient, clipped by a few simple shape paths (slashes and circles). When the page is loaded, this plugin manipulates the <svg>, 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 <svg> (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:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  2. Include TweenLite and required plugins:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/easing/EasePack.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/CSSPlugin.min.js"></script>
  3. Slap in some SVG:

    <svg width="100%">
        <!-- Rectangle, what the gradient sits on -->
        <rect x="0" y="0" width="100%" height="100%" clip-path="url(#theSVGPath)" fill="url(#gradient)" />
        <defs>
            <!-- Gradient, to be clipped by the clipPath -->
            <linearGradient id="gradient" x1="384" y1="1284" x2="2051" y2="-384" gradientUnits="userSpaceOnUse">
                <stop offset="0.1" stop-color="#ff5722" />
                <stop offset="0.18" stop-color="#f65729" />
                <stop offset="0.32" stop-color="#dc563d" />
                <stop offset="0.5" stop-color="#b3555c" />
                <stop offset="0.71" stop-color="#7a5388" />
                <stop offset="0.9" stop-color="#3f51b5" />
            </linearGradient>
            <!-- And here's the clipPath, containing some basic SVG paths -->
            <clipPath id="theSVGPath">

                <!-- Slashes and Circles (you can swap these out for anything, really) -->
                <path d="M1 144a2 2 0 0 1-1-3L80 1a2 2 0 0 1 3-1 2 2 0 0 1 1 3L4 143A2 2 0 0 1 1 144Z" transform="translate(-250,240)" fill="#396c93" data-width="85" data-height="145" class="slashes" id="slash1"/>

                <path d="M35 11c5 12-3 26-17 26C5 37-4 23 2 11 4 5 10 0 18 0S33 5 35 11ZM18 5c-7 0-11 4-13 8C2 22 8 32 18 32s16-10 13-19C29 8 25 5 18 5Z" transform="translate(-250,240)" fill="#396c93" data-width="37" data-height="37" class="circles" id="circle1"/>

                <!-- ...snip -->
            </clipPath>
        </defs>
    </svg>
  1. Include jquery.slashes-and-circles.min.js:

    <script src="dist/jquery.slashes-and-circles.min.js"></script>
  2. Call the plugin:

    $("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.

.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.

Contributing (贡献)

Check CONTRIBUTING.md for more information.

History (历史)

Check Releases for detailed changelog.

项目热度

项目信息

分享到

基本信息
开发语言
JavaScript
相关项目
0
相关仓库
0
Watchers
1
Stars
1
Forks
0
版本数量
3
最新发布
2016-02-16
首次发布
2016-01-24
仓库大小
30.3 KB

版本历史
0.1.0
2016-02-16
0.0.2
2016-01-24
0.0.1
2016-01-24

贡献者
Jordan Gardiner