CREATE CSS EFFECT

Import from built-in effects

Manual

CSS properties

List properties of transform supported in each keyframe :

  • "pos"
    Determine the time to change the set of CSS styles. Unit is percent (%), type value is number.
    The "pos" property supported multiple value, it mean in many different times set of same CSS styles. Then type value is array[].

    Example:
    Single value: "pos" : 30
    Multiple value: "pos" : [0, 10, 50]
  • "perspectiveDirect"
    Defines directly a perspective view to the current element. Type value is number.
    If the element set 3D transformation, the element need to have the "perspectiveDirect" property.
    Example: "perspectiveDirect" : 400
  • "originTF"
    Change the position X, Y, Z axis of transformed element. Type value is string.
    Example: "originTF" : "50% 100%"
  • "x", "y"
    Corresponding to defines the 2D translation along the X, Y axis. Unit is pixel (px), type value is number.
    Example: "x" : 200

    "x", "y" properties supported the percent unit, depending on width/height of the element.
    Example: "x" : "100%" // width of element 300px -> "x" : 300

    "x", "y" properties supported calculate in string.
    Example: "x" : "(100% - 50) * 2"
  • "z"
    Defines a 3D translation along Z-axis. The element need to have "perspectiveDirect" property. Unit is pixel (px), type value is number, not support string value.
    Example: "z" : -1000
  • "scale"
    Defines a 2D scale transformation. Type value is number, it mean set same value for X-axis and Y-asix of scale property.
    Example: "scale" : 2

    Set value for X-axis different Y-axis, type value is array[], first-value for X-axis, last-value for Y-asix.
    Example: "scale" : [0.5, 2] // "0.5" for X-axis, "2" for Y-axis
  • "scaleX", "scaleY"
    Corresponding to defines the 2D scale transformation along the X, Y axis.
  • "scaleZ"
    Defines a 3D scale transformation along Z-axis. The element need to have "perspectiveDirect" property.
  • "rotate"
    Defines a 2D rotate transformation. Unit is degrees(deg), type value is nummber.
    Example: "rotate" : 90
  • "rotateX", "rotateY", "rotateZ"
    Corresponding to defines the 3D rotate transformation along the X, Y, Z axis. The element need to have "perspectiveDirect" property.
  • "skew"
    Defines a 2D skew transformation, supported X-axis and Y-axis. Unit is degrees(deg).
    Set value only for X-axis, type value is number.
    Example: "skew" : 45

    Set value for X-axis and Y-axis, type value is array[], first-value for X-axis, last-value for Y-axis.
    Example: "skew" : [30, 15]
  • "skewX", "skewY"
    Corresponding to defines the 2D skew transformation along the X, Y axis.
  • "opacity"
    Set the opacity level for an element. Type value is number.
    Example: "opacity" : 0.5
Editor

Create your own effect easier than ever. You just need basic knowledge off CSS and JSON syntax, even you don't need to know Javascript.
CSS effect is an animation include one or many transitions. CSS effect in Ruby-Slider have JSON array syntax (view JSON syntax at here).

1. Create

The new effect is created by the empty content editor :
Create new from blank
Or import content from the built-in effects :
Create new from import

2. Update

To update and preview the new effect with the content of editor, press "Update & Play" button.
Button update - play
To restore the content in the last update, press 'Reset' button
Button reset

The default keyframe with position 100 :
{ "pos": 100, "x": 0, "y": 0, "z": 0, "scale": 0, "skew": 0, "rotate": 0, "rotateX": 0, "rotateY": 0, "rotateZ": 0, "opacity": 1 }

The Ruby Animation automatically insert the default keyframe-100 into the animation if without keyframe-100 in the animation, to save size of "rubyanimate.js" file.

Controls

Direct control on effect-demo :

  • Click on effect-demo when pause to play the effect.
    Play effect
  • Click on effect-demo when play to pause the effect
    Pause effect
  • Click on effect-demo when pause at position-end to restart the effect
    Restart effect

Control on the duration-track :

  • Click on the track to change transformation of the effect-demo at that position.
    Click on track
  • Drag thumbnail on the track to change transformation of the effect-demo.
    Drag on track

Buttons control the demo-effect :

Button controls
Export

1. The customized effect is tested and run successfully, select and copy the contents of effect on the editor.
Select and copy


2a. Open your text editor (SublimeText, Atom,..), named for the new customized effect (ex: "newEffect"), and past the contents of customized effect in about 21 line-numbers.
Past on rubyAnimate
The RubySlider will have new effect with name "newEffect". All RubySlider can use that effect.


2b. If you only want the current RubySlider use the customized effect, you insert the customized effect in "rubyAnimateKeyframes" object-option when setup options :

$('.rs01').rubyslider({
    ...
    rubyAnimateKeyframes : {
        newEffect : [
            { 'pos': 100, 'opacity': 0 }
        ]
    }
});