Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/enricodeleo/jqlouds

:cloud: An awesome yet simple plugin for jquery that let's you create clouds on the fly.
https://github.com/enricodeleo/jqlouds

animation cloud decoration jquery jquery-plugin ui-components

Last synced: about 3 hours ago
JSON representation

:cloud: An awesome yet simple plugin for jquery that let's you create clouds on the fly.

Awesome Lists containing this project

README 

        
![jQlouds logo](logo.jpg "jQlouds logo")



An awesome yet simple plugin for jquery that let's you create clouds on the fly.



## Getting Started



### With Bower

You can include jQlouds in your project with bower with:



```bash

bower install jqlouds --save

```



### npm



```bash

npm install jqlouds

```



### Manual

Download the [package](https://github.com/enricodeleo/jqlouds/archive/1.0.0.zip), unzip it and include the preferred script within `/dist` (minified or not) after the jQuery library (unless you are packaging scripts somehow else).



In your web page:



```html



```



## Documentation



### Basic usage

As you can see in the [getting started](#getting-started) section, you just need to pass a jquery selector and call the plugin in order

to get the job done.



You can generate multiple clouds on the same page, each element will be filled with _random static clouds_. Note that the selected element will be relatively positioned in order to accomodate absolutely positioned clouds.



```javascript

$('#sky1, #sky2').jQlouds();

```



### Height of the sky

Unlike the real sky, here we know exactly how much it is height: minimu height is given automatically based on the height of the biggest cloud. You can give a different height to the element throug the plugin itself.



__via css__



```html




jQuery(function($) {

  $('#sky').jQlouds();

});



```



__via jquery__

```html




jQuery(function($) {

  $('#sky').jQlouds({ skyHeight: 223 });

});



```



### Animation

Sometimes the wind blows and clouds became to move around the sky, isn't it? Well, you can turn on your very personal `wind` just by setting it to true:



```javascript

$('#sky').jQlouds({

  wind: true

});

```



__note about performances__



jQlouds relies on jQuery's `.animate()` to perform its animations. Since this is something quite heavy, animations come disabled by default. I'll try to improve this feature with CSS3 animations. If you'd like to contribute feel free to [fork this project](https://github.com/enricodeleo/jqlouds/fork) and submit a pull request.



### Number of clouds

The amount of clouds is chosen randomly between 20 and 30.



You can adjust these values settings `minClouds` and `maxClouds` parameters:



```javascript

$('#sky').jQlouds({

  minClouds: 5,

  maxClouds: 10

});

```



### Maximum clouds' size

The default image provided (it is served as _base64 image_ so you won't need to upload anything but the plugin) is 227x96 px. All the clouds generated are randomly sized less or equal to that size. You can adjust this behavior as per your needs with:



```javascript

$('#sky').jQlouds({

  maxWidth: 113,

  maxHeight: 48,

});

```



### Customize the cloud

If you don't like my cloud (how dare you! :P) you just need to change the `src` property when calling the plugin, like so:



```javascript

$('#sky').jQlouds({

  src: 'path/to/image.png',

});

```



### Options

These are all the current options supported by jQlouds, as we've seen above:



```javascript

options = {

  src: 'images/cloud.png', // path to image, the default is a base64 (you can see the actual string in sources)

  maxWidth: 227, // max image's width

  maxHeight: 96, // amx image's height

  minClouds: 20, // minimum amount of clouds

  maxClouds: 30, // maximum amount of clouds

  skyHeight: null, // height of the container element

  wind: false // animate clouds, default is false

};



$('#sky').jQlouds(options);

```



## Examples

You can [see this plugin in action here][example].



[example]: http://enricodeleo.github.io/jqlouds/



## ToDo

:heavy_check_mark: Introduce CSS3 animations with jQuery.animate() fallback



:heavy_check_mark: Release on bower registry



:heavy_check_mark: Release on jQuery Plugins registry (until 0.2.3 since the registry is now deprecated)



:heavy_check_mark: Release on npm as per jQuery new policy



:heavy_multiplication_x: SVG images with png fallback



:heavy_multiplication_x: ? (__suggestion welcomed__)



## Release History

* __v1.0.0__ - 27/01/15

  * check for 3D support and apply jQyery.animate() as a fallback if not supported

  * bumped version to 1.0.0 on bower and jquery

* __v0.2.3-css3__ - 27/01/15

  * alternative version that leverage __hardware acceleration__ via CSS3 and translate3d (see [the css3 branch](https://github.com/enricodeleo/jqlouds/tree/css3))

* __v0.2.3__ -  06/07/14

  * registered to the bower repository

  * pushed to the [jquery plugin registry](http://plugins.jquery.com/jqlouds/)

  * published the little [demo website](http://enricodeleo.github.io/jqlouds/)

* __v0.2.0__ -  06/07/14

  * improved clouds' positioning

  * introduced configurable container's height

  * written an hopefully decent `README.md`

* __v0.1.0__ - 05/07/14

  * first release