top of page
Full Screen Scroll

Full Screen Scroll

Let site visitors scroll smoothly from screen to screen

Intermediate.png

Intermediate

9K

Published:

January 14, 2021

Anchor 1
Hire a Developer

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.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

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:

  1. Assign a hidden property to each anchor. 

  2. 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.

  3. 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.

  4. Depending on location and direction, scroll to the top of the strip the visitor was heading toward.

APIs We Used

Non-code example.

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Image and Text Animation

Image and Text Animation

Use wix-animations API to animate images and text.

Intermediate.png

Intermediate

Sticky Header

Sticky Header

Keep the site header visible when a visitor scrolls the page.

Intermediate.png

Beginner

Hide and Show an Image

Hide and Show an Image

Show and hide an image according to the clicked button.

Intermediate.png

Beginner

Anchor 2
bottom of page