Skrollr Menu

In my last post I talked about extending the easing functionality of jQuery. Here is what I was using that easing for. My custom skrollr menu!

HTML / PHP

First we need to setup the menu itself. Here is a shortened version of what I did.

I am going to skip over the actual skrollr section code because that is a large chunk of code that will vary greatly for each project. I leave that part to you!

Javascript

Here is the code needed to make your skrollr menu work.

There we go! Surprisingly simple to setup your own skrollr menu!

65gpg_tr

Here is what the menu looks like when you are looking at the third section ( …sort of. I didn’t want to screen shot the entire project ).

Note: If you want to setup your own menu for skrollr you should also check out the skrollr menu plugin. It works pretty well, but I had more fun making my own.

Another Note: The ‘easeOutQuad’ function is not built into jQuery. You will need to get jQuery UI or add your own easing functionality to use non standard easing functions. See my previous post.