Streaming live at 10am (PST)

Snap to divs on scroll


#1

Hello everyone. For my personal portfolio I would like to make a navigation like this: http://www.hugeinc.com/.
I already made the full screen divs with the fixed background and the dot navigation on the side. It would be nice to have a custom code for the snapping.
Anyone knows how to do it?
Thanks!


Section to Section Transition
#2

Update: I found this jquery plug-in that does exactly what I need. I tried to add the custom code before the tag, but it doesn't seem to work.
http://www.jqueryscript.net/slider/Apple-Like-Vertical-One-Page-Scrolling-Plugin-For-jQuery-slidescroll.html


#3

Contact http://forum.webflow.com/users/bartekkustra for some custom code. He is a Javascript ninja and can do pretty much anything you want.


#4

@Dario If u manage to get this working, please do share on the forum, i would most like to learn how to do this.


#5

Sure I will! But for now I'm not there yet. It shouldn't be super hard, on the website they explain how to do it. Maybe I'm just missing something simple.


#6

There are great examples on http://alvarotrigo.com/fullPage/examples/apple.html

See the examples and links on the bottom of the page and inspect element to see the syntax of the divs. This may be more complicated to do in Webflow without tweaking the code externally if you have to match a set syntax for divs and anchors. Not sure, but worth a shot. It has a pretty simple page structure.

Hope it works! I have been wanting to do this for a site as well.


#7

This link you have provided is notorious for displaying nothing. Are we save?


#8

Oh, I was not aware of that @topelovely. Thanks for letting me know. Sorry for the misdirect.

I have experimented with several of these types of scripts in the past. I may be remembering the wrong example. I was looking for one that is touch enabled.

Do you know what the issue was with this one? I have tested several libraries in Firefox, Safari, Chrome & iOS (mac), but have not tested any of the solutions extensively in IE.

I will look back through my bookmarks.


#9

Update: I manage to have the script working. Following the website it didn't work, so I just downloaded the script and copied pasted the code from there.
I still have one problem: the side navigation is not visible, so I added one myself, but with the script running, the "current" state doesn't update correctly.
Any idea on how to fix this?

here's the test page I made:
http://dariostefanutto.com/test-page#start


#10