JSignage effects

 

This page is related to jSignage animation events. See also the "Create new effects with jSignage" article on how to extend the framework with new effects.

Introduction

Effects can be added to any layer to change the way it appears or disappears from the scene. Highlight effects like blink or nudge can also be used. Effects can be triggered relative to the beginning ("in effect") or to the end ("out effect") of the active interval of a layer. To add an effect, call one the effect methods detailed below on a layer or on a selection of layers.

Common attributes

All effects share a common set of parameters:

• dur: Control the duration of the effect. Usually the default value is '0.5s'.

Fades

Description

Fade in from background and fade out to background.

The following effects are implemented:

• .fadeIn() : fade from background;
• .fadeOut() : fade to background;
• .audioFadeIn() : fade the audio level from 0 (mute) to 1 (level at 100%);
• .audioFadeOut() : fade the audio level from 1 to 0(mute).

Examples

// Add a fade-in to a new video layer
$('svg').add( $.video ({ href: 'video/1.avi', id : '#myVideo' }).fadeIn({ dur: '10s' });

// Add a fade-in to an existing layer
$('#myVideo').fadeIn({ dur: '1s' });

// Add a fade-in to all images in the document
$('image').fadeIn({ dur: '1s' });

// Add a fade-out to an existing layer
 $('#myImage').fadeOut({ dur: '1s' });

Slide in/out effects

Description

Slide in or out like the slides in a projector.

The following effects are implemented:

• .slideIn() : input slide effect
• .slideOut() : output slide effect

Parameters

In addition to the default parameters the following can be used:

• direction: Direction of sliding motion, one of:
  • random (default)
  • rightToLeft
  • leftToRight
  • bottomToTop
  • topToBottom

Examples

// Add an input effect to an existing media
$('#myVideo').slideIn({ dur: '3s', direction: 'leftToRight' });

// Add an output effect to an existing media
$('#myImage').slideOut({ dur: '0.5s', direction: 'bottomToTop' });

Wipes

Description

One of the multiple types of wipes.

The following effects are implemented:

• .wipeIn() : input wipe effect
• .wipeOut() : output wipe effect

Parameters

In addition to the default parameters the following can be used:

• type: Wipe type according to the taxonomy of SMPTE 258M-1993 (see below)
• subType: Wipe subtype (see below)

SMPTE Wipe types and subtypes

• "random" (default) Any of the choices belows
• "bar"
  • "random" (default)
  • "leftToRight"
  • "rightToLeft"
  • "topToBottom"
  • "bottomToTop"
• "box"
  • "random" (default)
  • "topLeft"
  • "topRight"
  • "bottomRight"
  • "bottomLeft"
  • "topCenter"
  • "rightCenter"
  • "bottomCenter"
  • "leftCenter"
• "barnDoor"
  • "random" (default)
  • "vertical"
  • "horizontal"
• "iris"
  • "rectangle" (default)

Examples

// Add the default wipe effect to an image. As no duration is specified, the duration of the effect will be 1s.
$('#myImage').wipeIn();

// Add the default 'box' effect to an existing image
$('#myImage').wipeIn({ dur: '2s', type: 'box' });

// Add the horizontal barnDoor effect to an existing image
$('#myImage').wipeIn({ dur: '2s', type: 'barnDoor', subType: 'horizontal' });

// Add an output effect to an existing image
$('#myImage').wipeOut({ dur: '1s', type: 'bar', subType: 'leftToRight' });

Fly in/out effects

Description

Fly into the scene or fly out of the scene effect.
The outside position for the fly is determined by the dimensions of the parent layer. A fly in will start from a position that is just outside of the parent layer and a fly out with end in a position that is just outside of the parent layer. When the parent layer is the top level svg element, that position is outside the screen.

The following effects are implemented:

• .flyIn() : input fly effect
• .flyOut() : output fly effect

Parameters

In addition to the default parameters the following can be used:

• direction: Direction of motion, one of:
  • random (default)
  • rightToLeft
  • leftToRight
  • bottomToTop
  • topToBottom
• acceleration: Level of acceleration / deceleration expressed as the ratio from initial speed to final speed. (default: 3)

Examples

// Input fly in effect from left to right. The default acceleration is used:
$('#myImage').flyIn({ dur: '1s', direction: 'leftToRight' });

// Output fly out effect from right to left using a constant speed:
$('#myImage').flyOut({ dur: '1s', direction: 'rightToLeft', acceleration: 1 });

Page in/out effects

Description

Fade in and zoom in quickly from background and fade out and zoom out quickly to background.

The following effects are implemented:

• .pageIn() : input page
• .pageOut() : output page

Example

// Add a page-in to a new video layer:
$('svg').add( $.video ({ href: 'video/1.avi', id : '#myVideo' }).pageIn();

Pivot effects

Description

Pivot around a virtual horizontal or vertical line on the center of the layer.

The following effects are implemented:

• .pivotIn() : input pivot effect
• .pivotOut() : output pivot effect

Parameters

In addition to the default parameters the following can be used:

• orientation: Orientation of the pivot line, one of:
  • random (default)
  • horizontal
  • vertical

Example

// Adding an input pivot effect to an existing media:
$('#myVideo').pivotIn({ orientation: 'horizontal' });

Cube face rotation effects

Description

Pseudo 3D effect simulating the rotation of the faces of a cube.

The following effects are implemented:

• .cubeFaceIn() : rotate cube face in
• .cubeFaceOut() : rotate cube face out

Parameters

In addition to the default parameters the following can be used:

• direction: Motion direction of the rotation effect, one of:
  • random (default)
  • rightToLeft
  • leftToRight
  • bottomToTop
  • topToBottom

Example

//Adding an input cube face effect to an existing media:
$('#myVideo').cubeFaceIn({ direction: 'leftToRight' });

Zoom effects

Combined zoom and fade effects.

Description

The following effects are implemented:

• .zoomIn() : zoom from smaller size while fading from background
• .zoomOut() : zoom to larger side while fading to background

Parameters

In addition to the default parameters the following can be used:

• factor: Zoom factor. Default: '20%'.

Example

// Adding zoom effects to an existing media:
$('#myVideo').zoomIn().zoomOut();

Blink effect

Description

Hide the layer, "blinking" it to draw attention.

Since this is not an entry effect, offset will typically be > 0.

The following effects are implemented:

• .blink() : blink effect

Parameters

• dur: Duration of the effect, i.e. time during which the layer is invisible (default: 0.5s)
• offset: Start time of the effect (default: 0s)
• repeatInterval: Interval between repeats (default: 1s)
• repeatCount: Number of blinks (default: 1). The layer will be hidden first at time=offset, then time=offset+repeatInterval, then time=offset+2*repeatInterval, and so on. It can be set to 'indefinite' to repeat the effect any number of times during the animation.
• repeatDur: How long to repeat the blink effect (default: undefined). When null or undefined, repeat is controlled by repeatCount.

Examples

Make an existing image blink three times. The image is hidden for 0.5 seconds (the default) after 2 seconds, then it will disappear every 1 seconds (the default).

 $('#myImage').blink({ offset: 2, repeatCount: 3 });

Make an image blink very fast 10 times on opening. The image is shown for 0.1s, then hidden for 0.1s.

 $('#myImage').blink({ offset: 0, repeatCount: 10, dur:0.1, repeatInterval:0.2});

Nudge effect

Description

Move the layer around its rest position, as if nudged on the side, to draw attention to it.

The effect is controlled by three parameters. nudgeX and nudgeY control motion and nudgeZ controls the zoom. The motion is specified either as an absolute number of pixels or as a percentage value relative to the width or height of the layer. Percentage values are strings ending with the % sign, as in '10%'. The zoom is a percentage factor, with '0%' meaning no zoom. At least one of these needs to be defined for the effect to apply as no default values are provided.

Since this is not an entry effect, offset will typically be > 0.

The following effects are implemented:

• .nudge() : nudge effect

Parameters

• offset: Start time of the effect (default: 0s)
• dur: Duration of the effect (default: 0.5s)
• nudgeX: Maximum extension of the horizontal motion. Positive to the right and negative to the left. (default: 0).
• nudgeY: Maximum extension of the vertical motion. Positive toward the bottom and negative toward the top. (default: 0).
• nudgeZ: Maximum zoom factor in percents. positive for zoom, negative to shrink (default: '0%').
• repeatInterval: Interval between repeats (default: 1s)
• repeatCount: Number of repeats (default: 1). The effect will start first at time=offset, then time=offset+repeatInterval, then time=offset+2*repeatInterval, and so on. It can be set to 'indefinite' to repeat the effect any number of times during the animation.
• repeatDur: How long to repeat the effect (default: undefined). When null or undefined, repeat is controlled by repeatCount.

Examples

Nudge an image to the left after 2 seconds. The nudge effect is applied three time. Each time the image is shifted during 0.5 seconds (the default).

 $('#myImage').nudge({ offset: 2, repeatCount: 3, nudgeX: '-10%' });

Zoom an image making it grow by 10% during 5 seconds.

 $('#myImage').nudge({ offset: 0, dur:1, repeatInterval:1, repeatDur: 5, nudgeZ: '10%' });

Zoom an image making it shrink by 25% during 5 seconds.

 $('#myImage').nudge({ offset: 0, dur:1, repeatInterval:1, repeatDur: 5, nudgeZ: '-25%' });