What is Parallax Scrolling?
Scrolling/Parallax effects are a way of making your School pages more dynamic and interesting! As users scroll down a page, the illusion of depth is achieved by moving the background images or page elements more slowly than the foreground images, creating an engaging visual experience.
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 the 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 are the Parallax Settings?
Every element has an Effects setting in the right editing sideform. Scroll Effects can be added in:
- Widgets
- Background sections (available for Image, Video, Embed, and SVG backgrounds)
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).
Section backgrounds
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 the 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.
Widgets
Click on the element you wish to edit and select one from the following Types under the Effects tab on the sideform:
- Custom
- Fade in
- Fade out
- Scale in
- Scale-out
- Slide in from the right
- Slide in from the left
- Slide out from the right
- Slide out from the left
- Rotate
3. Choose the devices where you wish the scrolling effect to occur.
We suggest previewing the scrolling effects on all devices to see the effect appearing as you wish on all devices. Changes can only be made in the Desktop/Laptop mode, so it will not be feasible to tweak the appearance of the scrolling effects specifically for another device, for example, a Phone.4. Enable or disable the Preview option while editing the element on the authoring page.
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 the element leaves the 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 = the intensity of the movement on x-axis (px)
- Move vertically = the intensity of the movement on y-axis (px)
- Fade = the opacity of the fade option (0-1)
- Rotate = the rotation by degrees (-360° - 360°)
- Scale = 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:
Recommendations and Tips
1. When a scrolling effect has been added, the following icon will be displayed in 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 affecting 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. You will need some web design experience to create a smooth and user-friendly outcome.