Scenic

Options

data-zoom

A level of zoom after transition. Should be bigger than 1 for zoom in. Can be less than 1 for zoom out.

  • type: number (float)
  • default: 1.5
    ...
        <div data-zoom="1.3">
         ...
        </div>
    ...

data-angle

Layers below will move faster if angle is positive, if angle is 0 then layers will not be moved at all (only zoomed). If angle is negative it will give opposite effect when upper layers will be moved faster.

  • type: number (float)
  • default: 0.3
    ...
        <div data-angle="-0.3">
         ...
        </div>
    ...

data-frequency

Actually it is time in milliseconds that determines how often we will check a scroll position and recalculate positions of layers. If value is set to 0, then we will process each scroll event of the browser.

  • type: number (float)
  • default: 250
    ...
        <div data-frequency="500">
         ...
        </div>
    ...

data-duration

Animation duration in seconds. If set to 0 then no animation will be applied at all.

  • type: number (float)
  • default: 1
    ...
        <div data-duration="1">
         ...
        </div>
    ...

data-timing

Transition timing function

  • possible values: 'linear','ease','ease-in','ease-out','ease-in-out'
  • default: 'ease-out'
    ...
        <div data-timing="linear">
         ...
        </div>
    ...

data-height (of container)

Height of a frame in % of its width.

  • default: '50%'
    ...
        <div data-height="45%">
         ...
        </div>
    ...

data-distance

Initial distance from a camera of a particular layer. Should be in a range of 0..1, where 1 is far, and 0 is near.

  • type: number (float)
  • default: automatically calculated depending on position in list of images.
    ...
    <img src="..." data-distance="0.9"/>
    ...

data-left

Left position in % of frame width.

  • type: number (float)
  • default: 0
    ...
    <img src="..." data-left="10.9"/>
    ...

data-top

Top position in % of frame height.

  • type: number (float)
  • default: 0
    ...
    <img src="..." data-top="22.7"/>
    ..

data-width

Image width in % of frame width.

  • type: number (float)
  • default: 100
    ...
    <img src="..." data-width="50"/>
    ..

data-height

Image height in % of frame height.

  • type: number (float)
  • default: 100
    ...
    <img src="..." data-height="50"/>
    ..

← Methods →