Download and include the
scrollmeister.js script and you're good to go:
Here's a full HTML document you can use to get started:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Scrollmeister Starter Kit</title> </head> <body> <scroll-meister scroll guides-layout="guides: left 0 2vmin, right 100% 2vmin"> <element-meister layout="guides: left right;"> <h1>I am the Scrollmeister</h1> </element-meister> </scroll-meister> <script src="scrollmeister.js"></script> </body> </html>
You can also use this CodePen to play around.
Here's a short overview of what Scrollmeister is essentially.
Scrollmeister uses custom elements such as
element-meister, which behave like regular block elements. For the most part they are all identical and are only semantically different. Just like
div are functionally identical. However, what makes the custom elements such as
element-meister different from a
div is the ability to enhance them using behaviors.
A behavior adds functionality to an element. This can be anything like styling, user interaction, network communcation or animations. Scrollmeister comes with behaviors that are ready to use and can also be extended. To add a behavior to an element you simply add the attribute to the element. To configure the behavior you use the value of the attribute to pass props to it. Props are similar to CSS properties. For example the native
style attribute could have a value like
width: 100px; opacity: 0.5;. In the same way the
guides-layout attribute can have props like
width: 1200px; guides: left 0 2vmin, right 100% 2vmin;. What the behavior does with these props is completely up to the behavior.
An element can have any number of behaviors. Behaviors can also depend on and communicate with others and can be chained this way. One of the most important behaviors that you cannot get around are
element-meister elements are not positioned using CSS. Scrollmeister comes with its own layout engine called Guides Layout. The gist of the Guides Layout is that the left and right edge of every single element is snapped to a vertical guide (just like a guide in Photoshop). You can have as many guides as you want and they can also have a width (so you can have gutters). Within an
element-meister element you are free to use all the CSS you want.
The Guides Layout is absolutely essential for Scrollmeister and it's scroll performance. There is no need for tons of wrapper elements, all
element-meister elements are direct children of
scroll-meister. When you scroll they basically move up and down on their guides like a train on rails. This means pinning an element or moving it at a different speed (e.g. parallax) is a no-brainer.
This requires three behaviors:
scroll-meister: sets up all the guides and gives them names. Does the actual layout of all elements with the
scroll-meister: let's you scroll and intelligently switches touch/native scrolling.
element-meister: defines which guides this element snaps to and other things such as its height or if it should be pinned. Renders the element with the dimensions and position that the