Actors - ActionLabs/Scrollster GitHub Wiki
There are two types of actors available in Scrollster.
The general layout of an actor looks like this:
'Slide Two': { // (String) Name to give the actor. Must be unique.
type: 'html', // (String) Type of actor.
content: 'SCROLL ANIMATION COMPONENT?', // (String) Content for the actor, this value will be different depending on the type of actor.
size: ['100%', '100%'], // (Array of two integers or strings) Size of the actor on the stage
position: ['50%', '50%'], // (Array of two integers or strings) The initial position of the actor relative to the stage.
zPosition: 100, // (Optional, Integer) Actors position on the z axis
classes: ['z2'], // (Optional array of strings) Class names to apply to the actor
properties: { // (Optional) Collection of CSS values to apply inline for the actor.
backfaceVisibility: 'visible',
fontSize: '6.5em',
textAlign: 'center'
}
}
Actor Values:
type:(String) Type of actor. Valid values are'html'and'image'. These impact what the content values need to be.content:(String) Content for the actor. If the actor type ishtmlthen this string is the HTML that will display in the actor. If the actor type isimagethen this string is the url to the image to display in the actor.size:(Array of two integers or strings) e.g.['50%', '50%']or[100, 200]. Size of the actor on the stage. If you specify a value as a string ending in a % sign, then it will be interpreted as a percentage of the screen size. If you specify a value as an integer, it will be interpreted as a number of screen pixels.position:(Array of two integers or strings) e.g.['50%', '50%']or[100, 200]. The initial position of the actor on the stage. Position is calculated from the center of the actor. If you specify a value as a string ending in a % sign, then it will be interpreted as a percentage of the screen size. If you specify a value as an integer, it will be interpreted as a number of screen pixels.zPosition:(Integer) The zPosition of the actor in space. The maximum visible value is999. As the value increases the actor is moved closer to the viewer.classes:(Array of string) Scrollster adds strings included in this array as class names on the actor.properties:(Object) Scrollster adds key-value pairs in the object as inline styles on the actor. Enter the style names as javascript camel case.