Skip to content

Layouts

Thomas Handorf edited this page Apr 22, 2018 · 7 revisions

Layouts determine how frames are shown and which transitions are possible. Layouts are specific to layers, so different layers in a stage can have different layouts. The layout can be chosen by adding the attribute

lj-layout-type="..."

in the layer. Currently 2 layouts are implemented.

Slide

In the slide layout, only 1 frame at a time will be visible in the layer. When the layer does a transition to a different frame, this frame will "slide" in to stage from a specific direction. The exiting frame will "slide" out of the scope in the same direction the new frame is sliding in. This is the default layout in layerjs.

<div data-lj-type="stage">
  <div data-lj-type="layer" data-lj-default-frame="frame1" data-lj-layout-type="slide">
    <div data-lj-type="frame" data-lj-name="frame1" style="width:450px"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
    <div data-lj-type="frame" data-lj-name="frame2" style="width:1440px"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder  of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure? </div>
  </div>
</div>

Canvas

In the canvas layout, all frames are visible in the layer, although some frames are not (or not fully) within the visible area. Frames are absolutely positioned on the layer, including rotations an zooms. When the layer transitions to another frame, the layer including all frames will move, rotation and/or zoom accordingly to fit the frame into the stage.

<div id="root" data-lj-type="stage">
  <div data-lj-type="layer" data-lj-default-frame="frame1" data-lj-layout-type="canvas">
    <div data-lj-type="frame" data-lj-x="-300" data-lj-name="frame1" style="width:450px"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
    <div data-lj-type="frame" data-lj-x="200" data-lj-y="100" data-lj-name="frame2" style="width:1440px"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <div data-lj-type="frame" data-lj-x="50" data-lj-y="10" data-lj-name="frame3" style="width:1440px" data-lj-scale-x="0.5" data-lj-scale-y="0.5" data-lj-rotation="30">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>
You can’t perform that action at this time.