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>