How to create a parallax effect

At Edition Digital we are all about providing the means for creating highly engaging and interactive experiences, so we have introduced the Parallax scroll page type that acts as a glue, so to speak, to connect a series of pages into a seamless scrolling feature. Using the Parallax scroll page type you are able to take the page concept even further, expanding it with animations, interactivity, and perhaps even video or image galleries to create a truly immersive and interesting user experience.

When you want to create a parallax scrolling feature out of a series of pages of your edition, first open the Workflow and select the Pages tab. This is where you can observe the current structure and flow of your edition, but you can also rearrange the pages and change their type. The Parallax scroll page type requires at least two pages to work, so you’ll need to create a vertical stack of pages by dragging one under the other.

Here’s how you do that. First select the page you want to use as the second page of the parallax scrolling stack with a simple mouse click. You’ll know that it’s selected when a green highlight appears around the page. Next, drag the selected page underneath the starting page of your parallax scrolling stack. While dragging the page you will notice a thin dark line indicating where the page will be placed, should you drop it at that position. Therefore, when you reach the desired location, just release your mouse button and the pages change places accordingly. Now repeat this process for additional pages that you want to use.

When working with many pages, you’ll be happy to know that you can also relocate a selection of multiple pages. To select multiple adjacent pages, simply click and drag your mouse across those pages. While doing so a semi transparent selection box will start to appear and all pages that are completely within that box will be included in the selection. To increase your selection, hold down the Ctrl (Cmd on MAC) key while selecting additional pages. Now you can use the same drag-and-drop approach to relocate the whole selection of pages.

 

When that's done, select one of the pages in the stack and pop open the menu with available page types, out of which you need to select the Parallax scroll. Immediately after you do so your selection will be applied to the whole stack, which is indicated by a scroll bar to the right. Every additional page that you include in the stack from here on out will automatically inherit the same page type as the rest. You can always change the stack’s order by using the drag-and-drop approach, which i’ve described a couple paragraphs back.

In addition you will also notice a red line going across the top most page, which is actually a slider that lets you control the amount of overlap that is applied to the pages while scrolling through the stack. Simply drag the line up or down and release it when the bubble to the left displays the desired overlap percentage. The easiest way to find out how much overlap you want to use, is to apply a certain amount and then click the Preview button at the bottom to test it out.

Once you come to grips with the Parallax scrolling page type it’s your turn to come up with great ideas and turn them into wonderful designs. To utilise the full potential of the Parallax scrolling page type we strongly suggest that you explore the numerous features of our proprietary Design tool, which enables you to create animations, add interactivity, image galleries, scrolling text, and much much more.

Now it’s time get creative and don’t forget to have fun!

 

In this article

    Have something specific in mind? Don’t worry, just type what you are looking for. Here is our searchy searched.