Adding waypoints to page elements
Waypoint container allows you to change the background of the target element when the user scrolls past a certain point. This enables you to change the existing background color, image or video 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. Add a section or a spacer that will be used as a container for the waypoint.
4. Select the container and open the source code tab.
In the source code find the ID of the container and copy it.
5. Next, select the waypoint and go to it's setting.
Under attributes add container='#(the id of the container)' and click save. The attribute should look something like this container='#n2section_1468870256959be37de48'
- 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