How to create full page scroll site navigation on the side and autoplay

Design help General
1

Hi everyone :slight_smile:

I am building a website for a client. She’s found this website and wants her website to be designed just like that.

I’ve succeeded to create full page scroll. But I have no idea how to create an auto play effect and a side navigation as on the website she likes.

Any help would be appreciated! :slight_smile:

Here is my site Read-Only: LINK
Here the Link to published site https://cosima.webflow.io/#1

2

Hi Emelie, welcome to the forum

For auto play I would use the Slider element, you can find it in the component category. for the circle timer I have no idea right now but promise to think about.

15

3

Hi Shokoaviv,

thank you for the idea! Do you know if there is a way of making the slider not slide horizontally but vertically? And also to put the little dots for the page navigation to the right hand side of the screen? If that is possible, I should be able to just use the slider to create full page scrolling.

4

In general, you should use fullpage.js to create such effect (You find a lot of tutorials about this library on webflow). **Also your example use this plugin.

By webflow only - Maybe in the future (For now, no interaction for scroll direction down/up scroll + keyboard Scrolling + Manipulate the browser scroll (Each X scrolls runs event only one time) + FullJS endless ideas (Huge framework).

webflow workshop

Webflow clone project:

navigation

The side navigation added by fulljs [options] initialization
**By default the navigation is false

navigation: true,
navigationPosition: 'right',

(GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple):
Vertical navigation dots - fullPage.js

The autoplay

No built-in option by fullpage.js for autoplay (Search on stackoverflow for solution). One solution by an JS-interval :

1 Like
5

Thank you for your advice! I’ll try to implement it. It seems to be pretty advanced, so I might have to come back for some more help.

1 Like
6

I created a tutorial long time ago regarding how to create an autoplay for fullpage.js:

Syntax has changed a little bit for fullPage.js version 3, but the setInterval concept is exactly the same one.

2 Likes