Full Screen Scroll
Let site visitors scroll smoothly from screen to screen
Intermediate
8K
Published:
January 14, 2021
Example Description
In this example, we stacked 3 column strips in a row and implemented a smooth scrolling action between the strips. Site visitors scroll a little bit with their mouse and the page automatically scrolls to the next strip in the direction of the scroll.
You can view a tutorial on this example here.
How We Built It
Page Elements
-
3 column strips: The strips are stacked on top of each other. Visitors scroll from one strip to the next.
-
8 anchors: There's an anchor at the top and bottom of each strip, as well as on the border between strips. The anchors help us determine where we are on the screen, as well as the scroll direction.
Code
The code for this example does the following:
-
Assign a hidden property to each anchor.
-
Add onViewportEnter() and onViewportLeave() event handlers for each anchor. When the anchor enters the viewport, the hidden property is set to false and when it leaves the viewport it’s set to true.
-
Also using the event handlers, when the anchors enter or leave the visible area of the screen, check which other anchors are visible and use that information to determine where the site visitor is on the page and in which direction the visitor was scrolling.
-
Depending on location and direction, scroll to the top of the strip the visitor was heading toward.
Related Examples
Did this help?
|
Thanks for your feedback!
Image and Text Animation
Use wix-animations API to animate images and text.
Intermediate
Sticky Header
Keep the site header visible when a visitor scrolls the page.
Beginner
Hide and Show an Image
Show and hide an image according to the clicked button.
Beginner