ThemeKit UI

Split Scroll

Split Scrolling

Layout

A CSS grid layout to create two columns and using "position:sticky" for scrolling with no need for Javascript.
The layout switches to a single column on mobile phones in portrait mode.

Sticky Stack

Images

Lazy Load

The images are inserted in an HTML5 <figure> element with alt text and a lazy loading option.
The images are inserted with 100% width and height using the object-fit property to prevent stretching.

Scrollbox

Text Content

Items

The text content is inserted in an HTML5 <article> element with a heading, optional styled span, text and an optional link.
Links can be globally configured to open internal or external pages.

Scroll Grid

Responsive

Options

The scroller can be full width or centered with a maximum width.
The pointer are created using a pseudo element and are optional.

Scroll Images

Split Scrolling

A split scrolling layout has two coumn with either the scroll directions reversed or the scrolling offset.
Scrolling in alternate directions may look cool but is not really viable in that it will create confusion and induce motion sickness in about 200% of the visitors
This type of scrolling usually needs Javascript which is not good for a responsive page' download efficiency.

Setup In EverWeb

The Split Scroll widget fills the heaight of the browser/viewing device window. Since EverWeb cannot handle viewport units a fixed height needs to be set for editing and then removed prior to publishing.
Unfortunately this means that only the first item can be viewed for editing on the EverWeb design canvas.