Facebook Like

us and stay connect with Onextrapixel on Facebook.

24 Superb Sites That Use Horizontal, Vertical Or Multi-Directional jQuery Scrolling Effect

jQuery JavaScript Framework has fast become an indispensable part of web 2.0 formation and will continue to be used heavily in websites and projects. As the search for entertaining visual effects continues, the performance and speed of a site should not be compromised. Now with jQuery, it's possible to integrate captivating visual effects together with highly effective functions.

Using jQuery scrolling effect is not only a new form of showcasing your site or work, but it also gives the audience a fresh experience when they interact with your site.

Horizontal, Vertical Multi Direction jQuery Scrolling Effect

With the help of jQuery.ScrollTo plugin, we can transform a normal site into a slideshow storyboard that will bring across a unique experience to visitors during their journey on the site.

Here are 24 superb sites that has used jQuery to displayed either the horizontal, vertical or multi-directional scrolling effect. Most of them have used the jQuery.ScrollTo plugin to create a flash-like scrolling navigation experience, while some of them have used other unique jQuery scripts.

jQuery Horizontal Scroll

jQuery Horizontal Scroll is a unique way of presenting your site to the audience, not many sites have chosen to use it in their site. Sometimes designers or developers worry that the audience will not like the feel horizontal scrolls give, and believes it may compromise the conventional style of vertical web page surfing.

When applying the horizontal scroll on a site, the message that you want to bring across needs to be bold so that it will create an impact to the audience. Also, remember to keep the writing to a minimum. If it's done appropriately, they can be very attractive.

Vanityclaire

Claire Baxter lives in Dallas and is a Creative Director of the Art Director persuasion.

Vanityclaire
Vanityclaire

Aredes for Girls

AREDES is a Brazilian company dealing with a variety of clothing for girls.

Aredes for Girls
Aredes for Girls

Carrot Creative

Carrot Creative is a new-media marketing agency located in DUMBO, Brooklyn, NY. It specializes in social media marketing and user experience design.

Carrot Creative
Carrot Creative

Sursly

Tyler Finck is a designer that specializes in Photoshop, Illustrator, InDesign, Flash, Canon/Nikon DSLRs, Final Cut Studio, Logic Pro, Mac + PC and iWork.

Sursly
Sursly

Peter Pearson

Peter Pearson is a BA New Media graduate from the University of Leeds, UK, currently based in St Albans, Hertfordshire. The site is a showcase of his university and freelance work as a web designer, developer, animator and artist.

Peter Pearson
Peter Pearson

Zupadupa

Zupadupa is a web agency from Romania that offer web design services, web development, marketing and online ads, web consulting, branding and rebranding.

Zupadupa
Zupadupa

Gavin Castleton

Gavin Castleton is a musician and currently on tour to spread his talents.

Gavin Castleton
Gavincastleton

Artist In Design

Artist In Design is a German web agency that provides web graphic designs.

Artist In Design
Artist In Design

jQuery Vertical Scroll

jQuery Vertical Scroll reassembles the old school way of vertical scrolling and injects a new vibrant auto scrolling into it. By clicking at the navigation, the page scrolls gracefully down the section. Now you can change your perspective of the traditional vertical scrolling sites.

Danny Blackman

Danny Blackman is currently a 3rd year BA Communications & New Media student at University of Leeds, UK and a freelance designer & developer.

Danny B lackman
Danny Blackman

Design in Social

Designinsocial is a collective aspiration, where one occurs to the opportunity to entrepreneurs and industrialists with fewer resources to harness his product or business through professional graphical design.

Design in Social
Design in Social

Dreamerlines

Janis is a web designer working for a digital creative agency called Digibrand.

Dreamerlines
Dreamerlines

Emrah Yaman

Emrah Yaman's was born in Kocaeli/Turkey and is a freelancer working on all kinds of projects varying from websites to print and brand identity.

Emrah Yaman
Emrah Yaman

Kinetic Shadows

Et Cetera Brian started his design career in multimedia and web design in the 90s and deals with interactive development, 3D work and interactive design.

Kinetic Shadows
Kinetic Shadows

Legwork Studio

Legwork Studio is a web agency that deals with print design, web design & development and motion design.

Legwork Studio
Legwork Studio

New in Creative

Nguyen Le is an Interactive Designer/Developer from Melbourne.

New in Creative
New in Creative

Pojeta

Tomas Pojeta is a designer from the Czech Republic.

Pojeta
Pojeta

Red Crown Studio

Red Crown Studio has a team of professionals that deal with web design, web development, visual identity design and email marketing.

Red Crown Studio
Red Crown Studio

Spicy Design

Alex ElChehimi is a web/graphic designer located in Montreal.

Spicy Design
Spicy Design

Toby Powell

Toby Powell is a web designer that specializes in creating beautiful, usable, professional websites using best practice accessibility and the latest W3C web standards guidelines.

Toby Powell
Toby Powell

Visual Elixir

Jim Gunardson is an illustrator and designer located in New Jersey, near Philadelphia.

Visual Elixir
Visual Elixir

jQuery Multi-Directional Scroll

Integrating the best of horizontal and vertical scrolling effects and transforms them into an interactive experience. Using jQuery multi-directional scroll effect is a beautiful way of presenting your site to your audience.

Wall Swaps

Wall Swaps is a design firm located in Nottingham, UK.

Wall Swaps
Wall Swaps

Serial Cut

Serial Cut is a Madrid based studio, established in 1999 by Sergio del Puerto, working on a wide variety of worldwide projects, but focusing mainly on Art Direction.

Serial Cut
Serial Cut

Enterro da gata

Enterro da gata is developed by Rui Silva, also known as "Penso", who lives in Braga, Portugal. He is a web designer and developer.

Enterro da gata
Enterro da gata

J and K

Jackson & Kent is a French agency that deals with web designs and development.

J and K
J and K

Conclusion

This list sums up some of the superb sites that have used jQuery to display horizontal, vertical or multi direction effects. Most sites are so dynamic that even the background moves around. One thing is for sure, jQuery will be constantly improving and we will be constantly looking for better ways to present our sites to our audiences.

Do you use the above mentioned jQuery scrolling effects in your site(s)? Or do you have a superb site that you wish to recommend? Leave your recommendation below!

Posted on: June 26th, 2009

Terrance

Terrance is a versatile web developer and one of the chief editor of OXP. He enjoys creating functional websites and is particularly engrossed in all the tiny details mixed together to construct great user experiences. He always believe that every web user deserves the best!

Share This Article

  • Share
  • Delicious
  • Stumble Upon

21 Comments & 4 Pingbacks | Add a Comment

  1. June 27, 2009 at 2:20 pm

    Great post!!
    Thanks for sharing.

  2. June 29, 2009 at 12:04 am

    Great post! Here are 2 websites that must be part of this collections: http://www.visualboxsite.com & http://www.lucino-gene.com

    • Terrance
      June 29, 2009 at 1:55 am

      Thanks for the recommendation!

  3. July 1, 2009 at 11:08 am

    I'd like to throw in http://tyrale.com for consideration.

    • Terrance
      July 1, 2009 at 1:02 pm

      Hi Tyrale,

      How can i miss you out?

      Part 2 is on it's way, your site will be added to the list.

      Stay tuned. :)

  4. Alan
    July 10, 2009 at 11:56 pm

    Does anyone know of any tutorials going through the process of creating vertical scrolling website.

  5. franzyfranz
    July 11, 2009 at 4:47 am

    sweet collaction
    i really like this one: http://design-farm.net

  6. July 29, 2009 at 9:59 pm

    Thanks for including Kinetic Shadows in this great list.

  7. October 26, 2009 at 4:08 pm

    Maybe you should consider adding http://www.salon-lafolie.com to your list. Its using not only scrolling effect, but awesome illustrations too.

  8. November 13, 2009 at 12:52 pm

    Those are some great skills :)

  9. November 24, 2009 at 11:43 pm

    Süper çalışma saygılar.

  10. November 24, 2009 at 11:44 pm

    Gerçekten emeğe saygı göstermek lazım:)

  11. December 5, 2009 at 1:45 pm

    Terrance can u plz try and check if my website can be added?

    http://www.tridibghosh.com

    It has both use of lightbox and Jquery scrolling. Hope you like it.

    Thanks

  12. December 10, 2009 at 6:41 am

    I'm thinking of using this effect on a website I'm currently designing so these are really handy examples.

    Cheers for the post

    Ryan

  13. December 30, 2009 at 7:06 am

    Great post!

    I love this designs! They demonstrate that in many cases Flash is superfluous..

    Here 2 website with the same effects but build in mootools...

    http://www.emergentitaliani.it

    http://www.solegiallo.it

    and this are 2 horizontal scrolling portfolio templates for indexhibit and wordpress using jquery:

    http://www.stefanoferroni.com

    http://www.marconofri.com

    Bye!

  14. January 9, 2010 at 1:59 am

    Nice Collection! I just finished working on my own horizontal website. http://www.deboraparentes.com
    Check it out!

  15. January 14, 2010 at 3:21 pm

    very nice javascript site list

  16. April 14, 2010 at 1:46 pm

    Superb ! :D I love horizontally scrollable sites ( even if most users dont prefer them ) - as long as its kept to a minimum & done nicely as stated . Great roundup of some truly awesome sites ! :)

    M.

  17. June 17, 2010 at 11:54 am

    good stuff, really help full

  18. June 21, 2010 at 4:52 pm

    good collection, it was nice to read, enjoyed

  19. August 13, 2010 at 11:22 pm

    Hi all, check this one out. http://www.taylortaylorlondon.com

Please note that comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names. Kindly do not spam, and do not advertise!