Tutorial: Scroll the Screen with One Mouse Scroll

Discussion Made by the community
,
1

Demonstrating how to create a smooth full screen scrolling animation with one single scroll on Wix sites.

This tutorial is for beginners, but require full attention to the details in order to understand.
Preview the live example: https://nasriyasoftware.wixsite.com/example65465

View the tutorial video and its code here :
https://www.nasriya.net/to/tutorial?id=W79B3uN9rgrefC55

APIs used: onViewportEnter( ) , onViewportLeave( ) .

1 Like
2

Nice!

1 Like
3

This is wonderful, thank you!

1 Like
4

Ive been trying to pull this effect off for a very long time . thanks for sharing!!!

1 Like
5

I have been looking for this for awhile however the links to the code and tutorial are no longer valid. Does anyone have the code they can share? It would be greatly appreciated!

6

It’s been a bit since I worked on this, and me and him did it in a slightly different way, but the way I did it was having a container at the bottom of each section, 10 pixels off the bottom.

Then I had this code:

let midScroll = false;
$w.onReady(function () {
    //nedscroll kode
    $w("#section1").onViewportEnter(handler=>{
        enterOne()
    })

    $w("#section2").onViewportEnter(handler=>{
        enterTwo()
    })

    $w("#section3").onViewportEnter(handler=>{
        enterThree()
    })
    $w("#section4").onViewportEnter(handler=>{
        enterFour()
    })

    //oppscroll kode (The bottomOf are the containers at the bottom of the pages)
    $w("#bottomOf1").onViewportEnter(handler=>{
        enterOne()
    })
    $w("#bottomOf2").onViewportEnter(handler=>{
        enterTwo()
    })
    $w("#bottomOf3").onViewportEnter(handler=>{
        enterThree()
    })
    $w("#bottomOf4").onViewportEnter(handler=>{
        $w("#section2").collapse()
        $w("#section3").collapse()
        enterOne()
        $w("#section2").expand()
        $w("#section3").expand()
    })
});

Then I had this type of code for each of the enterOne/enterTwo and so on:

function enterThree(){
    if(!midscroll){
        midscroll = true;
        $w("#section3").scrollTo()
        .then(()=>{
            midscroll = false;  
        })
    }
 }

To prevent some of the double-scrolling that I experienced.

But as I said, it’s been a while since I worked on this, but it might point you in the right direction. (Remember that each section needs to be 100vh!)

7

Thank you so much. I also ended up locating the tutorial I was looking for at: https://www.wix.com/velo/example/full-screen-scroll . Works great.

1 Like