Create Scrolling Experience Using Page Height

2 Minute read

Reading Time: 2 minute

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

Setting Page Width, Height, and Browser Scaling

If you click on the ‘Canvas’ tab at the top of your Ceros experience you’ll enter into the Canvas Settings of the Inspector Panel.

  • Width defines how wide you want the canvas to be.
  • Height sets the total height of the entire canvas.
  • Browser Scaling determines how your experience will scale when opened full screen.
    • Scale to Fold, you’ll have the option to set a fold height that will determine how much of the page will show before scrolling.
    • Full Width will ensure the experience is expanded all the way to the edges of the browser and will fill up the entire window.

If you choose to Scale to Fold, you can create a scrolling page by setting a Page Height taller than the fold. Setting a Page Height that is smaller than the Fold height will automatically snap the Page Height to the 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.

When creating different device variants, your width will automatically snap to 1280 pixels for desktop, 540 pixels for mobile, and 768 pixels for tablet. These are the widths we typically design at for each device, but you can go in and edit these however you need for each experience.

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

The reason it shows up more narrow than the 1024px width is because the ceros experience is set to display everything above the Fold.

If we instead set the experience to be Full Width, it will fill up the entire browser window like this experience.

Was this helpful?

3 4
3 out of 7 people found this helpful