Alongslide is a responsive, parallax-inspired presentation framework for long-form reading on the web, employing a lightweight templating syntax for Markdown. Scroll right »
Alongslide's source code is now publicly available.
The various components of Alongslide will be open-sourced by early 2014.
Created by and for Triple Canopy. Copyright 2013, Canopy Canopy Canopy, Inc.
- A fine-tuned parallax-like scrolling framework built on a fork of Skrollr
- Flowing text columns using a custom implementation of the emerging CSS Regions spec
- A responsive-and-beyond layout logic in CSS+JS
- A lightweight templating syntax for Markdown implemented in Ruby with Redcarpet and Treetop
Alongslide puts layout first, respecting the aspect ratio of the content area at all window sizes and resolutions.
On desktop, press
alt-g to see the grid(s)—and resize the window to any size or shape.
Try it on mobile, too.
This is a panel
Panels function like sidebars which can interrupt or supplement the flowing text.
In Alongslide Markdown, structural elements are specified by indented blocks of text (traditionally used for
<code>) to show visually that they sit outside the primary flow.
They may each specify transitions—either fading or sliding in.
This is section text
Section text continues to flow, automatically breaking up into columns, while panels remain fixed.
For an example of a longer text, see the below an excerpt from the upcoming Alongslide announcement:
By integrating recorded and textual media, digital publishing conceives of the experience of reading in both temporal and spatial terms; whereas a book might contain paragraphs and a series of images, only digital forms can map the particular experience of one onto the other by regulating the way in which the reader progresses through a text. The syntax of Alongslide emphasizes—even extols—this development by enabling editors to define the “start” and “end” points of content elements within a layout, as though they were being arranged on a timeline. (In fact, Alongslide’s underlying scrolling mechanism is based on a fundamental technique borrowed from the domain of animation and motion design: the use of key frames, which articulate transition points in the linear flow of data.) As user interfaces are increasingly imbued with virtual tactility, thanks to animated interaction cues, digital reading platforms will continue to incorporate motion design and animation—and justly so, as they have defined the experience of screen-based forms since the medium originated 125 years ago.