What is Parallax Scrolling?
Scrolling/Parallax effects are a way of making your School pages more dynamic and interesting! When a user scrolls down a page, an illusion of depth is created by making the page elements or the background images move more slowly than the foreground images.
Parallax scrolling can:
- Grab your visitors’ attention by conveying information with strong visuals.
- Make your school pages stylish and professional!
- Trigger longer page visit time, as the user's curiosity can lead to scrolling through the entire design.
- Stimulate users with eye-catching and visually appealing graphics.
- Emphasize key information and Call To Action (CTA) buttons.
With parallax scrolling, you can give your school a very unique look & feel and create a dynamic user experience!
Where can I locate the Parallax Settings?
Every element has an Effects setting in the right editing sideform. Scroll Effects can be added in:
How to Add Scrolling effects
1. Navigate to the desired page.
2. Click on the element you wish to add a scrolling/parallax effect (Widget or Background section).
Click on the Edit Section → Section tab (the first sideform tab) → Background scroll effects → Scroll effect (available for Image, Video, Embed, and SVG backgrounds).
a. For Image and SVG Background Sections, you can choose Zoom in, Zoom out, Parallax, which is similar to Reveal with a smoother movement, Close up, which is similar to Zoom in but with more intense results, Push away, which is similar to Zoom out but with more intense results and Fixed.
b. For Video and Embed Background Sections, you can choose one of the following Scroll effects: Zoom in, Zoom out, Fade in, Fade out.
Click on the element you wish to edit and select one from the following Types under the Effects tab on the sideform:
- Fade in
- Fade out
- Scale in
- Slide in from the right
- Slide in from the left
- Slide out from the right
- Slide out from the left
3. Choose the devices where you wish the scrolling effect to occur.
4. Enable or disable the Preview option while editing the element on the authoring page.
How to Edit the Widget Scrolling effects
Depending on the selected Effect Type, the relevant option(s) will be automatically toggled on/off.
- Move horizontally = move on the x-axis
- Move vertically = move on the y-axis
- Fade = fade with a chosen opacity
- Rotate = rotate with specific degrees
- Scale = scale x size
If you choose to activate more than one of the effect options, the Type will automatically be converted to a Custom one. Each of these options is also editable based on the animation state:
- Starting animation state = When the element enters the bottom of the browser viewport, once the user starts scrolling
- Non animated state = When an element enters the middle of the browser viewport (this state can be disabled)
- Ending animation state = When element leaves viewport at the top of the screen upon scrolling
In each of these options, you can change the position or range of position that the effect takes effect, as well as the intensity of the effect:
- Move horizontally option = the intensity of the movement on x-axis (px)
- Move vertically option = the intensity of the movement on y-axis (px)
- Fade option = the opacity of the fade option (0-1)
- Rotate option = the rotation by degrees (-360° - 360°)
- Scale option = the scalability x size (0-2, it may go higher; however, you will need to type the value manually)
The changes affect the starting, non-animated, and ending animation state percentages. We recommend keeping the default values when adding a scrolling event for the effects to appear as expected.
Parallax Effects section
You can also add a ready-made Parallax Effects section by choosing one of the options we offer, including Media & Text, Columns, CTAs, Mobile app, Newsletter, Offer, Background image, Tabs, and Counters:
1. When a scrolling effect has been added, the following icon will be displayed on the authoring mode under the selected element:
2. You can add as many scrolling effects as you want; however, it is recommended not to add a scrolling effect to all of the elements in your pages to avoid increasing the page’s loading time and effect on the general user experience.
3. We recommend using our default type effects, although you can create your own custom effect by enabling a mix of different effects. Note that you will need some web design experience to create a smooth and user-friendly outcome.