Custom jQuery scroll plugin

Today we present a custom jQuery scrolling plugin that uses canvas flavored syntax for drawing paths. The jQuery plugin uses the methods moveTo, lineTo and arc and to kickstart you with the plugin and getting the right path, a canvas overlay with the path can be enabled.

Scrolling can be done using the mousewheel, using the up/down arrow keys or the spacebar. The fasted way to scroll is using the spacebar and holding shift down with spacebar will scroll backwards. A custom scrollbar is also included allowing click and drag scrolling (scrollbar is enabled by default).

The custom jQuery scroll plugin also allows rotating the entire page using the power of CSS transforms. This can be done either along a path or around the current position. In browsers that don’t support CSS3, all rotations are ignored.

Custom jQuery scroll plugin

Custom jQuery scroll plugin

View Plugin

Related Posts

jQuery pagination plugin – tradpaginator

HorizontalNav : jQuery plugin that spans a horizontal navigation

Make content sticky on scroll to a point

jQuery plugin to organize content in a responsive layout

6 Comments

  1. Mike

    06.01.2012

    Reply

    how would I get the path to automatically be visible?

  2. Mike

    06.01.2012

    Reply

    You’d think that changing drawPath: false to drawPath: true

    in the jquery.scrollpath.js doc would do the trick but it doesn’t.

    • Bogdan

      06.01.2012

      Reply

      Well, normally changing that should have been done the trick, but if it doesn’t, then we need further investigation

  3. Mike

    06.01.2012

    Reply

    I just tweeted you to follow me to IM one another – maybe I’ll reverse engineer this site http://joelb.me/blog/2012/jquery-scroll-path/#more-297 ( I got it from the comments on http://joelb.me/blog/2012/jquery-scroll-path/#more-297) to figure out what I’m looking for

    • Bogdan

      06.01.2012

      Reply

      @bogdanteodoru right? Didn’t get anything so far.

  4. Mike

    06.01.2012

    Reply

    no, I used @JoelBesada – although I just sent a message to the one you just stated. I’ll reverse engineer the site that I just spoke about and see what I can come up with. Don’t want to bother you if I don’t need to. What time is it by you right now? It’s 11:15am here in Cleveland Ohio

Leave a Reply