Get Started with Scrollmeister

Quick start

Download and include the scrollmeister.js script and you're good to go:

<script src="scrollmeister.js"></script>

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.

Scrollmeister essentials

All aspects of Scrollmeister are explained in short tutorials you can follow along. You can also check out the documentation when you're looking for specific details.

Here's a short overview of what Scrollmeister is essentially.

Custom elements

Scrollmeister uses custom elements such as scroll-meister and element-meister, which behave like regular block elements. For the most part they are all identical and are only semantically different. Just like section, article and 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.

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 guides-layout, scroll and layout.

Guides Layout

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:

  1. guides-layout on the scroll-meister: sets up all the guides and gives them names. Does the actual layout of all elements with the layout behavior.
  2. scroll on the scroll-meister: let's you scroll and intelligently switches touch/native scrolling.
  3. layout on the 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 guides-layout and scroll behavior calculate.