magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Water Background


This extension adds an attractive animated (by mouse movements) water background style to almost any object.

Some features:

- Multiple target objects that share the same settings.
- Multiple instance support.
- Custom color and tranparency.
- Fixed size or proportionally to the target element.
- Advanced wave configuration for smoothness and size.
- HTML5 cross-browser with fallback degradation (
currently, iOS and Android are not supported).
- Unobtrusive: does not interfere in other processes that rely on drag events.
- Lightweight: No jQuery and no extra dependencies.


HTML5
W3C compliant


DEMO


* Just a brief about some of the changes that were made lately...

* New in version 1.1

- Optional automatic waves mode.
- Three modes for the automatic waves calculation.
- Extended functionality to support optionally mouse movements, automatic waves and fallback modes.
- Wide range from calm to vibrant waves depending on depth and timing among other advanced parameters.
- Other minor code and smoothness improvements.



How to use?

1. Design your page with its elements as you usually do.
2. Open the properties dialog and enter the parameters for the instance, such as color, transparency,
    height, etc. or leave them as by default.
3.a. For layers background: drag and drop an extension instance within the desired layer.
3.b. For page background: Drag and drop the extension instance in the page.
3.c. For other objects background: Enter the id of the object you want to have the background.
4. Preview or publish.

Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with