jQuery Scroll Path

February 9th, 2012 :: Web Development

A computer mouse

I released a jQuery plugin a couple of days ago and I haven’t had time to write about it here until now. The plugin is based on a slightly crazy idea, but it has been getting some good response on Forrst and Twitter (my follower count has tripled quadrupled since the release).

Most people seem to think that it’s a pretty cool plugin, but struggle in coming up with good practical uses of it. It might not be of much use on any “serious” website, but I think it can create quite a nice effect on personal portfolios and presentation pages, if used creatively.

So what does the plugin do exactly? Well, it lets you define a custom path for the window to follow when scrolling up and down, and you can also throw rotations into the mix. You draw the path with methods that work exactly the same way as the canvas methods for drawing lines and arcs.

To make it easy to see how your path is coming along, I’ve added an option to display the path on an overlaid canvas. Enable this while your building your site, and you should have no problem with shaping the path exactly the way you want it.

After creating the demo I’ve learnt that the way you present your social “follow me” and “share” links can have a big impact on the rate of people that actually click on them. This time, I decided to only include links for following me and sharing the page on Twitter, completely disregarding all other social networks. This increased the amount of social shares tremendously compared to previous demos that I’ve made. Also, instead of using the default tweet button, I made my own custom tweet link that fits in better with the design, using my previously described technique. I’ll be keeping this in mind once I get around to re-designing parts of this blog.

The source code and documentation is on GitHub. Let me know if you use the plugin to build something creative, I’d love to see it!

Demo

  • http://www.amazingthings.in/ Aakash Doshi

    This is some killer stuff buddy!! totally impressed <3

  • http://rawdesigns.net/ Rob Abby

    Nice work!  Lot’s of creative uses for this.

  • greeneggs

    really neat idea, could it be used within a div that is not fullscreen? I’d love to use it so that if the mouse would scroll the path only wilest it was inside a div (600×400 for example) then outside this div the page would scroll as normally expected.
    I’d even be happy to show/hide/lose the scroll bar.

    possible? deireable?

    • JoelBesada

      I haven’t really built the plugin with other uses than fullscreen in mind, so I don’t think it would work in your case. You could of course try to edit the code to your needs, if you know your way around Javascript well enough. 

    • greeneggs

       Thanks for getting back on this.
      I’m no .js man by far – it’s all hack’n'slash client side.
      I’m thinking of how to integrate this in larger project and for this want to be able to ‘get in’ & ‘get out’ of this in other ways than pages. would you have any thoughts on if/how it at the end of the path, when I continue to scroll down the wrapper div scrolls up as an element/page of the curtains.js (http://curtain.victorcoulon.fr/)

      I would like to say i’m having a brain-freeze but I simple don’t know js/jq enough to know the possibilities of merginge these two pluigns.

      and advice would be greatly appreciated  (other than learn js/jq as this is in the process ;) )

    • JoelBesada

      What you could possibly do is use an iframe for the scrollpath part of the page, like this http://dabblet.com/gist/1966261. As you can see, you can scroll the iframe and the page body separately. 

      However, to continue scrolling the body after the path has reached its end, you’d have to put a callback function that rebinds the iframe’s scroll event back to the body (curtain.js). Since I haven’t worked much with iframes, and never tried out curtain.js, I’m not entirely sure if that would be possible.

      You have brought up an interesting case where having the plugin work for other than fullscreen elements would be useful, so I’m going to put that feature on my to do list. I can’t promise I’ll ever get around to implementing it though, but you never know. ;)

    • greeneggs

       many thanks Joel, I obviously wish you all the success with that ;)
      I am currently using an iframe of a curtain element and use a hover element on th eifram to let peopl know that in order to continue along the path they simply scroll outside the iframe area. it works well enough (better if it could get curtain to be an element on the path and the path to stop scrolling whilst inside this div – then no iframe needed )

      the two ideas I have been describing can really be summarised as…
      1: scrollpath contianing elements as ‘node’ along the path – each a self contained page that halts the path scrolling until a callback is received from the inner html to (seamlessly) takeback control of the scroll again.
      2: scrollpath is a ‘node’ in another scripts chain. like a page within a page so that would work as a tabbed item or in the case of curtain – a singe ‘page’ of curtains stack.

      just my thoughts – thank you for the script to date – it is beautiful.
      FYI: I’m using it as a resume site – a timeline of my life/career path. I’ll add the credits to you & others on the js side for sure. I’m a designer/php dev. not .js (at the moment).

      take care.

      ps; can the path be forced on at the start and can it’s z-index be changed to behind the elements?

    • greeneggs

       found both the z-indez and the visible path (it’s a toggle of the css display – how dub was I ;) )

    • JoelBesada

      I’m glad you figured it out :)

  • greeneggs

    playing with scrollpath again and have a few more ideas to add to my wishlist if you don’t mind me saying so…

    path position & rotation debug divs:
    The creation/position of path elements could be made easier if you automatically added div’s along the path’s sections. when defining a section the user could add a variable for number of sub-segments (vertices) i.e 3 = split line/arc into 3  and possibly even an ease-in/out weight variable.

    each vertex could have a procedural #id that automatically repositions/orientates any corresponding html div with matching #id to it’s position/rotation.

    The html deivs css would then be used to offset the div’s position/orientation relative to the vertex.

    I am sure these are big wishes but your work has such great potential I fear it would be used all too often out of the box or unimaginative paths because of the current method of path creation.

    take care, have a great day.
     

    • JoelBesada

      Having a feature that automatically positions elements along the path would definitely make the plugin easier to use. Since you already have a way to name different sections of your path, a feature that automatically snaps elements with the same ID to those sections should be easy to implement. This would also easily allow developers to set up a default layout for users with Javascript disabled.

      However, I’m currently in the middle of learning Ruby on Rails so that I can start working on a slightly larger project that I have in mind. This means that I most likely won’t be adding much to the plugin for a while. We’ll see how much time I have in the future to keep working on this, as there certainly are many things that still can be improved.

    • greeneggs

       thanks for listening to my ramblings :)
      you have fun with ruby and I’ll keep an eye on your site from time to time :)

  • http://www.web-expert.it/ Marco Sors

    Dear Joel,

    I like very much your plugin so I’ve decided to play with it building a small medieval adventure of an italian knight: http://web-expert.it/medioevo/index.html

    I hope you appreciate the experiment even if the language is obscure for you. As you can see, I’ve left the same path of the demo, but I’ve added a gmap iframe on the background, an old paper effect, some html5 media, icons and description to give it a narrative structure. 

    Compliments for your great job! I’ve spent some nice hours playing with your plugin, thanks.

    Ciao,
    Marco

  • http://twitter.com/vpfuentes Victor Fuentes

    Love it man. Just stepping into the jquery spectrum and your plugin is as impressive as it is educational. That snapping feature sounds great as well if it could be done in the future. Keep up the great work, thanks a ton.

  • Vijay Chakravarthy

    This is an awesome concept!! You could redo most of http://johnbhall.com/iphone-4s/ using this in a very elegant manner.

  • Marioescc

    Sos otro nivel, que excelente está. Felicidades. 

  • greeneggs

    hi again Joel,
    I’m making great progress on my use of your scrollpath and would like to ask if was only a small thing, could you add the ability to “ignore” or “counter” the rotation on elements with a given class. i.e. apply the opposite rotation on elemented with the class “noRotate” os that it stays aligned with the screen despite the rotation of the canvas. the position is the same not the roate.

    many thanks for listening.

    • JoelBesada

      I’m sorry but I don’t have much time to work on the plugin currently. As I’ve said, there are many things that could be added to the plugin to make it better, but my time is limited so I have to prioritize other things before this. 

      I hope you understand.

    • greeneggs

      no worries at all Joel,
      take care.

  • Ashok

    It’s not working in ie :(

    • JoelBesada

      You can try it out again now, I fixed the IE issues in the demo.

    • Ashok

      Great job Joel, thank’s for that fixing bug :)

  • Ellec

    awesome script, seriously!
    it makes sense it doesn’t work in ie, i just think there should be some kind of fallback for it. i’d love it if it could at least go to the selected div when i click on the corresponding number. any idea?
    (sorry for my english, it’s not my first language)

    • JoelBesada

      I changed some things with the demo before and must have forgotten to test it in IE. I went back and fixed the issues that were preventing the demo from working, so it should work fine now in IE 7+. 

  • Mydnic

    Hi Joel, 
    This is incredible ! I love it! 
    I’m playing and trying some test with an interface like this, and I wondered if it was possible to attach the path to the bottom of the page ??
    Is the scrollpath allways fixed to the middel of the screen?
    I would actually like to use the rotation scroll in order to make thing disappear and other things appear on the screen. I don’t know if I’m pretty clear (sorry for my english) =)
    I tried to fix my div to the bottom, but it stays on the middle of the screen…Thank you for your job and thank you by advance for answering my question.

    • JoelBesada

      The plugin always centers itself on the path, there’s no setting at the moment to change that.

      Sorry for replying so late.

    • Mydnic

      Thank you for answering,
      may the force be with you.

  • Charlesbenston

    What an great and easy to use plugin! 

    One question though, is this plugin going to be optimised for mobile (especially tablet devices) scrolling? I’ve been testing some stuff out on my ipad and can’t get it to work properly.

    • JoelBesada

      I haven’t put any work into getting this to work on mobile. For now, I’m working on some other things, so this plugin is unfortunately not very high up on my priority list. 

      However, I might take another shot at adjusting the plugin to use the native scrollbar, which should solve a bunch of problems and make the plugin work better with mobile devices. 

  • Shawn

    just wondering how to make it autoslide?

    • JoelBesada

      There’s no built in function for that, you’ll have to implement it yourself.

  • greeneggs

    has anyone got the path to show in chrome yet? not even the demo here shows the path :(

    • Patrick

      Works fine for me in Chrome 19, in fact the entire scrolling process is a lot smoother in Chrome than in FF, it could be because I have quite a few tabs open in Firefox though.

  • Patrick

    Hi Joel,

    Great work on this plugin. I noticed from the comments you don’t have much time to work on it but one suggestion I would make for a new version would be to include some zoom in out +/- links on the page. When I zoomed out on the page and then continued to scroll though with the path displayed it gave me a much better idea of how the path was actually being followed. Just a thought.