Create Scrolling Experience Using Page Height

knlowledgeart

Create Scrolling Experience Using Page Height

Scrolling pages can be useful for interactive infographics, landing pages, and other long-form content. Fortunately, Ceros makes it easy for you.

Setting Width, Fold, and Page Height

541 page height image

There are 3 settings in the bottom left corner of the Ceros Studio:

  • Width defines how wide you want the canvas to be.
  • Fold determines how much of the page you want to show before scrolling.
  • Page Height sets the total height for all content on the page.

To create a scrolling page, set the Page Height taller than the Fold. Setting the Page Height smaller than the Fold automatically snaps it to your fold height.

Each page can be up to 100,000 pixels tall. When adding new pages, the Page Height will automatically snap to the height of the last page you worked in.

If your page scrolls, a fold line will appear on the canvas. Everything above that line will appear in the browser window on page load. Everything below it will appear as you scroll down the page.

Any animations below the fold line will play when the visitor scrolls to that part of the page.

Comparing Fold Height and Page Height

Ceros scales to fit everything above the fold line into whatever space it’s displayed in. That means content with a large Fold height will shrink down in your browser window.

For example, take a look at this Experience set to a 1024 width and 2048 fold.

tall letterboxed experience

It shows up small because we told Ceros to display everything above the Fold.

If we instead set the Fold to 768 and the Page Height to 2048, we get a scrolling page like the one below.

A Quick Note About Embedding

You can display Ceros on your website with or without extra scrollbars. Check out our embedding tutorial to learn more.