quietflow.js
is a jQuery library for creating beautiful dynamic or static visual effects.
You can install quietflow through npm:
$ npm install quietflow
or through bower:
$ bower install quietflow
Alternatively, you can download the files in the lib/
folder manually.
Include a reference to the latest version of jQuery.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Include a reference to quietflow.js
.
<script src="lib/quietflow.min.js"></script>
To apply quietflow to an element, use:
$("#element").quietflow();
// or
$("body").quietflow();
quietflow.js
is very customizable and has many features. Listen below are each attribute specific to its theme.
The effect you would like to use. The default is set to "starfield"
.
The z-index of the canvas object. The default is set to -1000
.
$("body").quietflow({
theme : "starfield",
z_index : -1
})
The color of the stars. Default is set to white
.
The maximum random speed that can be assigned to each star. Default is set to 3
.
Animation speed. Default is set to 100
.
The side length of each square. The default is set to 10
.
These attributes specify the maximum value for red, green or blue respectively that can randomly be assigned to each square. The default sets each at 255
(100% random).
The speed of the animation where new sqaures are generated (in milliseconds). Default is set to 100
.
The large circle's radius. Default is set to 20
.
The radius of each circle contained within the large one. Default is set to 30
.
The background color. Default is set to "#3498DB"
.
The color of the circle. Default is set to "#34495E"
.
Speed of the circle movement. Default is set to 10
.
This attribute is if you do not want the circle colors to be assigned randomly. It takes a list of colors as the argument. Default is set to empty (random colors to be used instead).
The background color. Default is set to "#ECF0F1"
.
The maximum random radius a circle can be assigned. Default is set to 40
.
Speed of the circle movement. Default is set to 50
.
Number of circles. Default is set to 50
.
Boolean to make circles have 50% opacity. Default is set to true
.
The background color. Default is set to black
.
Color of the lines. Default is set to white
.
The color of the glow around a line. Default is set to white
.
Number of lines. Default is set to 50
.
The flashing speed. Default is set to 150
.
The starting color. Default is set to "#D4145A"
.
The finishing color. Default is set to "#FBB03B"
.
This attribute is if you do not want the circle colors to be assigned randomly. It takes a list of colors as the argument. Default is set to empty (random colors to be used instead).
The background color. Default is set to "#D6D6D6"
.
Number of triangles. Default is set to 50
.
Boolean to make triangles have 50% opacity. Default is set to true
.
This attribute is if you do not want the circle colors to be assigned randomly. It takes a list of colors as the argument. Default is set to empty (random colors to be used instead).
The background color. Default is set to white
.
Color of the lines. Default is set to black
.
The color of the glow around a line. Default is set to white
.
The flashing speed. Default is set to 100
.
This attribute is if you do not want the circle colors to be assigned randomly. It takes a list of colors as the argument. Default is set to empty (random colors to be used instead).
The background color. Default is set to "#D6D6D6"
.
Number of boxes. Default is set to 400
.
The maximum random side length that a box can be assigned. Default is set to 80
.
Boolean to make boxes have 50% opacity. Default is set to true
.
Speed to move boxes. Default set to 100
.
All color attributes must be passed as strings in one of the following formats: html color name, hex code, rgb() or rgba().
If you have any effect ideas you would like me to implement, let me know or even better, feel free to contribute to the project!