What is parallax scrolling
Parallax scrolling is a visual effect that makes your school pages more dynamic and engaging. As users scroll through a page, background images or elements move more slowly than foreground content, creating the illusion of depth and a more interactive browsing experience.
Parallax scrolling can help capture visitors’ attention with strong visuals, create a stylish and professional look for your school pages, encourage longer page visits, and highlight important information and call-to-action (CTA) buttons.
In this article, you will learn how to add and customize parallax scrolling effects to create more dynamic and engaging school pages.
Where to use scrolling effects
Scroll Effects can be added in:
- Widgets
- Background sections (available for Image, Video, Embed, and SVG backgrounds)
Add scrolling effects
1. Navigate to Website → Design → Edit Website.
2. Choose the desired page from the Pages Manager.
3. Select the element (widget or background section) you wish to add a scrolling effect to. Once clicked, the sideform pops up to edit your element.
4. Go to Effects and enable Scrolling effects.
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.
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.