Scrollmeister solves a particular problem really well, but it is important to understand when not to use Scrollmeister.
<scroll-meister guidelayout="foo:bar;"> <el-meister> lol wut </el-meister> </scroll-meister>
guidelayout behavior can be added to the
<scroll-meister> element. It defines the available guides and the maximum content width.
Guides are vertical lines that elements snap to. They have a name, position and width. Learn more about guide layout.
<scroll-meister guidelayout="guides: left 0 1vmin, center 0.5 0, right 0 1vmin;"></scroll-meister>
viewport guide keyword is always defined. It can be used in the
layout behavior for both left and right guides. It will snap the element the left or right edge of the viewport.
width property specifies the maximum width for an imaginary wrapper for the guides to orient. It is always centered in the viewport like a container element. Once the viewport becomes too narrow, it get's fluid and has the full width. Guides never leave the viewport.
<scroll-meister guidelayout="width: 960px;"></scroll-meister>
Draws the guides on top of the page so you can see them. Doesn't accept any properties. Requires the
Does nothing except for setting
0 as soon as it is attached. Doesn't accept any properties. This is useful to prevent the flash-of-unlayout.
<scroll-meister fadein style="opacity: 0; transition: opacity 0.5s ease-in-out;"></scroll-meister>
The core behavior to layout elements.
The name of two guides (defined in
guidelayout) that the element will snap to.
<!--This element spans the right half of the viewport, assuming a "center" guide has been defined--> <el-meister layout="guides: center viewport;"></el-meister>
50vh work as you would expect them. Percentages such as
50% are relative to the width of the element. This allows you to define elements with a fixed aspect ratio. There is also syntactic sugar for ratios using something like
1920/1080 will be converted to percentages internally.
<!--This element will always have an aspect ratio of 16:9.--> <el-meister layout="height: 16/9;"></el-meister>
There are two layout modes
flow mode works as you'd expect by putting each element below the previous one (note: the order can be influenced using the
dependencies property). The
follow mode removes the element from the document flow and instead makes it follow its leaders (see
<!--This element flows regularly.--> <el-meister layout="mode: flow;"></el-meister> <!--This element follows the above element and does not affect the flow.--> <el-meister layout="mode: follow;"></el-meister> <!--This element flows regularly behind the very first one, ignoring the follower.--> <el-meister layout="mode: flow;"></el-meister>
A follower can follow its leader in either a
parallax or a
<!--This element follows its leader in a parallax motion.--> <el-meister layout="mode: follow; followerMode: parallax;"></el-meister>
<!--This element follows its leader and is pinned while the leader is inside the viewport.--> <el-meister layout="mode: follow; followerMode: pin;"></el-meister>