How to add a cool moving “overlay” effect to your sites

Want to know the easiest way to add a cool effect to your Readz sites? Try adding what we call the moving or scrolling ‘Overlay Effect’ to your pages.

It’s super simple to do and adds visual depth to your site. Check out how it looks in the gif below.

Here is how you go about it: set a background image and then place all of your other content in a box element. This allows the content in the box to slide up over the background image as you scroll, giving the page an interactive and modern  look.

Using this effect is especially great for simple pages such as the cover, table of contents, or chapter separators. You can create a cover page with a background image (or video) and place the table of contents sliding up over it. All you have to do is place your desired background image, and then create a large box under it that covers the width of the page. Add the text from your table of contents into the box, and you’re good to go. How easy is that?!

Rather than adding just 1 box over the background image, you can add multiple boxes to allow sections of the background image to peek through. This is great for creating section separators like we used for our Microsites guide. As shown in the screenshots of the guide below, we set the geometric image as the background. We then placed all of the text content in beige and white boxes that cover up the background image. In the second image, we created some space between two of the boxes to let the background image peek through creating a page separator.

microsites interactivity

microsite overlay

To view step-by-step instructions and the video tutorial, check out our how-to-guide.


Our blog highlights delivered bi-monthly to your inbox
Subscribe to email updates
Our blog highlights delivered bi-monthly to your inbox

Builder. Marketer. Technologist. CEO @Readz | The one-stop solution for brands to create interactive brand content for the web | organic foodie beerie | paleo | cyclist | Los Angeles