A repository of over 1000 quality jQuery plugins

jQuery Waterpipe JS

Waterpipe JS is a jQuery Background plugin.

Created by Dragdropsite

waterpipe.js is a jQuery plugin for smoky backgrounds generation (HTML5 Canvas)

Not what you're looking for? Click here to view more Background jQuery plugins

waterpipe.js - smoky backgrounds generator (HTML5 Canvas)

waterpipe.js is a jQuery plugin for smoky backgrounds developed by dragdropsite.com

alt tag

Examples

Here are some examples generated using waterpipe.js plugin.

alt tag alt tag alt tag alt tag alt tag alt tag alt tag alt tag alt tag alt tag alt tag alt tag

Usage

1. Include jQuery and waterpipe.js

<script src="lib/jquery-1.11.0.min.js"></script>
<script src="waterpipe.js"></script>

2. Create wrapper with canvas element inside

<div id="wavybg-wrapper" style="width: 100%; height: 100%;"> 
    <canvas>Your browser does not support HTML5 canvas.</canvas>
</div>

3. Initialize with

var smokyBG = $('#wavybg-wrapper').waterpipe({
    //Default values
    gradientStart: '#000000',
    gradientEnd: '#222222',
    smokeOpacity: 0.1,
    numCircles: 1,
    maxMaxRad: 'auto',
    minMaxRad: 'auto',
    minRadFactor: 0,
    iterations: 8,
    drawsPerFrame: 10,
    lineWidth: 2,
    speed: 1,
    bgColorInner: "#ffffff",
    bgColorOuter: "#666666"
});

Options

OptionTypeDefaultDescription
gradientStartstring'#000000'Gradient start color in hex format.
gradientEndstring'#222222'Gradient end color in hex format.
smokeOpacitynumber0.1Smoke opacity 0 to 1.
numCirclesint1Number of circles (smokes).
maxMaxRadint or 'auto''auto'Could be used to change circle radius size
minMaxRadint or 'auto''auto'Could be used to change circle radius size
minRadFactorint0It's a factor representing the size of the smallest radius with respect to the largest possible. Integer from 0 to 1.
iterationsint8The number of subdividing steps to take when creating a single fractal curve. Can use more, but anything over 10 (thus 1024 points) is overkill for a moderately sized canvas.
drawsPerFrameint10Number of curves to draw on every tick of the timer
lineWidthnumber2Line width
speedint1Drawing speed (tick of timer in ms)
bgColorInnerstring'#ffffff'Background outer color in hex format
bgColorOuterstring'#666666'Background inner color in hex format

Methods

The following code could be used to call a method: smokyBG.data('waterpipe').generate();Please make sure variable smokyBG exists

MethodArgumentsDescription
generateGenerates background canvas
setOptionoptionName,Set a new value to an option. Please check the above table for possible option names and values
optionValue
downloadwidth: int,Download size in pixels
height: int

Demo

Please check the demo to generate and download your own smoky backgrounds: http://dragdropsite.github.io/waterpipe.js

Credits

rectangleworld.com - big part of code has been taken from the examples provided on this blog

License

Licensed under MIT license



You might also like these other Background jQuery Plugins

  • BackgroundSize.js

    Adds support for background-size “cover” and “contain” to IE8

  • jQuery BackgroundSize JS

    DEPRECATED, please use its successor: background-size polyfill

  • AnimatedResponsiveImag...

    A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely...

 Views
 Downloads

Download Github Page
License:

The MIT License (MIT)