It’s important to note that for your parallax scroll effect to be noticeable, the box element that contains everything you want to have parallax on has to be taller than 100% of the screen height (otherwise no scroll is necessary therefore it won’t scroll up or down!) You can drag-and-drop the height of the box to be taller than the page or you can manually set a height by selecting the box element, going to LAYOUT and adjusting the height. Start with 200vh for the height, you can always re-adjust it later. Once you have confirmed the element is contained within the box and the box is tall enough to need to scroll on the page, you can then set the parallax scrolling effect.

Select the element within you box you’d like to set parallax scrolling to. From the element menu, select the LAYOUT option and scroll down the list of options to set until you reach “Parallax Scroll BETA”. With the parallax scroll feature, you can create many different options, but here’s an easy to make configuration that you can tweak to make more of your own. Follow the set of options as they appear in the screenshot.
The most important ingredient for parallax scrolls in Readz is box elements and the element you want to have the parallax feature, such as a textbox element or an image element. Boxes act as containers in which our parallax scrolling elements are contained. To contain an element inside a box element, simply drag-and-drop the element into the box element. There’s a few ways to confirm that the element is indeed contained inside the box element.
7868_textbox
1. Select the box element. Move it up and down, left or right using the keyboard arrow keys. If the elements inside of the box move with the box, it is successfully contained. 2. Select the box or any element you believe is inside of that box, and check the index menu from the page menu. If the element in question is indented compared to the box element, then this means it is contained within that box. If you see no indentation, then this means that element is on the same level as the box and is not being contained.
parascro1
Set the speed to 100% and the direction to ‘down’. The option for start scroll when container crosses the top of the screen can be left the same for now, and the same for the option for end scroll when container crosses the bottom of the screen. These two options apply to when to trigger the parallax scroll effect to begin and end. The container in this case is the box our elements we want to have parallax scroll are contained in. The fade in and fade out option can be set, but again for now let’s leave these off. Once you’ve set those options on your element in the box container, try scrolling up and down in the editor. To increase the time the parallax scroll should affect the element, increase the height of the box that contains it. You can change the start and end scroll effects too to further tune when your elements’ parallax scroll settings trigger and end. Different elements in the same box container can have their own unique parallax scroll option. This makes the parallax scroll effect even more apparent when you can compare scroll rate differences between two elements on-screen.
Parallax Scrolling
This feature is only available in the desktop view
LEARN MORE
DELIVER BETTER CONTENT EXPERIENCES
web element- close
web element- menu web element- blue menu
Back to Menu
SUBSCRIBE
label 1
Email:
readz logo
SUBSCRIBE
readz logo- bold
web element- close
DELIVER BETTER EXPERIENCES
LEARN MORE
readz logo- mobile
twitter logo
facebook logo
linkedin logo
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- cosmetics readz client- hospitality readz client- telecommunications readz client- outdoor advertising readz client- ecommerce
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