Overview
Effects class provides collection of effects - currently MovingObjects and MouseTrack. It can apply effects to each element only by adding "sk-effects" as a value in the class attribute. To configure effect that you want to use, you should add "effect" attribute and give it a value (name of the effect). Each newly created effect is added to effects collection in SK.Effects.Registry class.
To pass an additional parameters (in JSON-string format) to the effect, you should use "effect-params" attribute.
Include resource files
/Core/Effects/Scripts/
init.js
<script type="text/javascript" src="/Core/Effects/Scripts/init.js"></script>
registry.js
<script type="text/javascript" src="/Core/Effects/Scripts/registry.js"></script>
Usage
To apply effect on element is necessary to add class "sk-effects". <div class="sk-effects" effect="effect_name"></div> where "effect" attribute show effect name. Some effect may need options which controls the effect behaviour. To configure parameters add another attribute called "effect-params". <div class="sk-effects" effect="effect_name" effect-params="params"></div> Data-attribute option can used for any kind of actions, not only to apply effects.
Effects List
MovingObjects
An effects class which apply motion effect to an element. Oparate with multiple options and created dynamic effects.
This is basic effect with wide range of options. The effect works by creating canvas element and draw an image, which image represent the effect. To configure options it's need to add JSON-string in "effect-params" attribute to the element:
<div class="sk-effects" effect="MovingObjects" effect-params="{image: 'http://domain.com/site/logo.gif', quantity: 20, direction: 'top', width: 100, height: 100, velocity: 1.4, sizes: [40,100, 120], angle: [0, 10, 30, 50]}" style="width: 500px; height: 300px;"></div> |
Parameters
Name | Description | Type | Default Value |
|---|---|---|---|
image | This represent the effect. Path to the image can be external link or image uploaded from ColorPalette of DesignPro ({image: '$image$'}) | String | - |
quantity | Numbers of images to draw | Number | 50 |
direction | Accept [top, right, bottom, left]. This is what direction to move the images | String | "top" |
velocity | Accept values from 0.1 to 5 | Number | 1 |
angle | Accept array of values or just one. If is array every single image will be rotated with random angle configured in this array | Array | [] |
width | Set width to all images | Number | - |
height | Set height to all images | Number | - |
sizes | It's array of sizes. When rendering image if the quantity > 1, for every image will set different size from this array | Array | [] |
NOTE: The only required parameter is image. The others are optional.
NOTE: If no width and height are configured it will use the image original dimensions. If width is missing but height not, width will be accept value of height and vice versa.
MouseTracks
An effects class which trach mouse move and depending of mouse offset, it apply backround position.
<div class="sk-effects" effect="MouseTrack" style="width: 500px; height: 300px;"></div> |