Adding waypoints to page backgrounds
Waypoints allow you to change the background of the page when the user scrolls past a certain point. This enables you to change the existing background color, image or video in place to another color, image or video at a particular point triggered by the scroll position.
1. Click the add button of the section that will be visible during the background change you have in mind. Select the waypoint widget from the widget list.
2. Choose what type of waypoint you want (i.e., image, video or color).
3.In the Editor, waypoints are represented as a small box on the right side of the section they were added to.
You can change the focal point to make sure that part of the image/video is always visible on the various screen dimensions. For video, you will need to do this during the initial upload of the file. Once you set the focal point and upload the video, modifying that file's focal point is not possible -- but you can always re-upload a new version of the video file and set to the new focal point you have in mind.
The waypoint is set to trigger when it scrolls to a point that is 40% from the top of the screen. You can change this in the waypoint palette by increasing or decreasing this number. For example, increasing it to 100% will trigger the background when it is 100% of the screen height away from the top (i.e., when the scroll position is at the very bottom of the screen).
Finally the background size option allows you to choose how the image/video will be sized.
- The default is cover which means: cover the whole screen with the image/video even if you have to crop of a bit of the content.
- Contain will keep the whole image/video inside the screen, but you'll see borders on the sides or on the top depending on the image/video aspect ratio.
- Finally "auto" will show the image in it's original pixel size.
- Waypoints can be used in combination with spacers that have a transparent background., to allow the user to see the background of the page through the spacer
- Make sure the order of the waypoints stays correct. E.g.: don't add a waypoint with offset 0% and below it add one with 100%, since the bottom one will trigger first and cause problems with the order of the background layers.
- Background videos are normally not possible in a web environment on iOS. But using our system it is possible with the following trade-offs: i) They don't include audio; and ii) these videos take more data , so they should only be used for short clips. We advise loops of less than 15 seconds.
- Waypoint animations can be controlled through CSS. Here is a list of basic animations that can be applied to waypoints using CSS classes. To apply the animation just enter the class name into the class field for the waypoint.
- waypoint-rotate
- waypoint-fade-up
- waypoint-fade-down
- waypoint-fade-left
- waypoint-fade-right
- waypoint-scale-down
- waypoint-scale-up
- waypoint-fade-up-diagonal
- waypoint-fade-down-diagonal