-
Notifications
You must be signed in to change notification settings - Fork 82
Gestures_Scrolling
Scrolling within a frame will occur when the stage dimensions are to small for the frame. This will indirect be the result of the "data-lj-fit-to" attribute that is placed on the frame. In layerjs their are 2 way that you can scroll, native and non-native. This is configured trough the layer's attribute "data-lj-native-scroll".
When a transition is happening, layerjs will take the scroll position of the current frame into account when the new frame is sliding in. This way the transition will look smooth and natural.
Native scrolling will let the browser be responsible to do the scrolling. The browser will put a scrollbar on the frame in order to make it possible to scroll in the frame.
<div data-lj-type="stage">
<div data-lj-type="layer" data-lj-default-frame="frame1" data-lj-native-scroll="true">
<div data-lj-type="frame" data-lj-name="frame1" data-lj-fit-to="width" style="width:600px; height:600px"> 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>
Behind the scenes, layerjs will actually wrap the frame in a scroller div. This is done automatically, but you can also manually add this scroller div.
<div data-lj-type="stage">
<div data-lj-type="layer" data-lj-default-frame="frame1" data-lj-native-scroll="true">
<div data-lj-helper="scroller">
<div data-lj-type="frame" data-lj-name="frame1" data-lj-fit-to="width" style="width:600px; height:600px"> 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>
In non-native scrolling, layerjs will take full responsibility of the scrolling mechanisme. In this mode, no scrollbar will be available to scroll. layerjs will actually change the position of the current frame to mimic a scroll behaviour.
<div data-lj-type="stage">
<div data-lj-type="layer" data-lj-default-frame="frame1" data-lj-native-scroll="false">
<div data-lj-type="frame" data-lj-name="frame1" data-lj-fit-to="width" style="width:600px; height:600px"> 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>
layerJS supports mouse, wheel, touch and touchpad gestures. These gestures enables you to move within the frames or trigger a the layer to move to an other frame. You can uses your fingers (or mouse) to pull down menus or swipe through a list of frames.
When you scroll or swipe in a frame and you hit the border of that frame, the layer can transition to another frame. These frames are called neighbors. A frame can have 4 neighbors and they are identified by their data-lj-name.
- neighbors.b = Up direction
- neighbors.t = Down direction
- neighbors.l = Right direction
- neighbors.r = Left direction
<div data-lj-type="frame" data-lj-name="frame1" data-lj-neighbors.b="frame2" data-lj-neighbors.t="frame3" data-lj-neighbors.l="frame3" data-lj-neighbors.r="frame4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget est sed odio facilisis dapibus at ut nisl. Quisque purus mi, laoreet nec orci in, finibus finibus metus. Maecenas vel pretium dolor.
</div>
If lj-neighbors.* directly specifies a frame name layerJS automatically creates the correct transition type (left, right, up, down) such that the frame animations proceeds in the correct direction.
You can also specify the link notation. The allows you to use the full flexibility of the hash router, including triggering multiple transitions at once, e.g. lj-neighbors.r="#frame2;background-layer.!none&p=fade"