How to add a cool overlay effect
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.
web element- menu web element- blue menu
Back to Menu
readz logo- mobile
twitter logo
facebook logo
linkedin logo
It’s super simple to do and adds visual depth to your site. Check out how it looks in the gif below. Notice how this page has a static graphic in the background while all of the text scrolls on top of it? Well, that's the Overlay Effect!
Video of scrolling overlay
Ingredients:
1 Background image (click here for more info about setting background images via Page Style) 1 Box element And that's it!
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 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?!
It’s super simple to do and adds visual depth to your site. Check out the video below for a break-down of how to build these kind of layouts in Readz!
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 Readz homepage. As shown in the screenshots of the homepage below, we set the geometric image as the background.
Example of scrolling overlay
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.
Readz example of scrolling overlay
LEARN MORE
DELIVER BETTER CONTENT EXPERIENCES
web element- close
web element- close
DELIVER BETTER EXPERIENCES
LEARN MORE
SUBSCRIBE
label 1
Email:
readz logo
SUBSCRIBE
readz logo- bold
readz logo
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
VISIT READZ.COM
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES
readz client- nonprofit readz client- health care readz client- sporting goods readz client- financial readz client- legalreadz client- technology readz client- mediareadz client- hospitality readz client- telecommunications readz client- outdoor advertising nurse.com_whitelogoAshley-Stewart-Logo_white
label 1
Email:
SUBSCRIBE
readz logo- mobile twitter logopink twitter logofacebook logopink facebook logolinkedin logopink linkedin logo
Share:
pinterest logopink pinterest logo
USING READZ
BEST OF
LATEST