17 mega-creative side scrolling websites.

December 29, 200810 Comments
Facebook Twitter Pinterest Plusone

Side scroller websites have been around for quite some time, but with the penetration now of javascript effects and frameworks, some new sites popping up around the web are really beginning to shine. Some of the following websites show how javascript can be employed to great effect to create eye popping content and imagery. Enjoy our picks of some of the best and most intriguing sites.

Wallswaps

http://www.wallswaps.com/

wallswaps

Created by the evil geniuses over at Erskine, wallswaps is a sideline project that gives you a yummy erskine badge in exchange for sending the guys something interesting. The site itself is a work of art using that old chestnut – the pinboard concept to allow you to marvel at the neato stuff. It also utilises some nifty javascript (Jquery with the scrollto plugin) for browsing the wall. It’s nice to see not only a horizontal design but a horizontal and vertical slide effect in operation. These guys really know how to push the boundaries.

Sursly

http://sursly.com

sursly

A hat tip to Mr Elliot Jay Stocks for pointing this one out. Sursly is the portfolio of Tyler Finck. The site uses visual tricks (such as the stripes near the start of the animation to give the illusion of the site almost opening out. If you are on a high bandwith connection and a high spec machine you’ll get the best results. At first glance I thought this was a flash based porfolio, just from the visual effects; a sign of things to come in 2009 where HTML with the right people behind it can create awesome sites that far exceed the experiences of flash counterparts. Sursly uses horizontal tiny scrolling to achieve its javascript effects.

14 tracks

http://14tracks.com

14tracks

14 tracks as a concept is brilliant. Weekly mix tapes with new artists – if you are into your music it is a definite must check out. All tracks are £1 each or all 14 for £6.48. Created by the team over at Default ltd the design, the site utilises Prototype Js and Ajax extensively, to give a responsive interactive experience.

Vault 49

http://www.vault49.com/

vault49

A flash photography portfolio – vault49 has a smoothness to it that I really liked.

Graphic Therapy

http://graphictherapy.com/index2.html

graphictherapy

Another flash one – graphic therapy are a digital agency with offices in New York creating outstanding work for brands such as Disney and Adobe. Click your mouse and drag to browse.

Dean Oakley

http://deanoakley.com/

deanoakley

Dean has a very clean and crisp porfolio, and his side scrolling efforts have not gone unmissed elsewhere around the web. The vector graphics used perfectly compliment the implementation. The site also uses the same javascript that Sursly.com uses (mentioned earlier).

Nile Studio

http://inside.nile.ru/

insidenile

A young and ambitious design bureau – Nile Studio’s work encompasses webdesign, graphic design and video work. The scrolling on the site is achieved with a combination of JQuery and preloaded imagery. Move left and right to see them in action.

Nanadc Summer 06

http://www.nanadc.com/Summer06/nana.html

nana

A quaint little clothes shop in Washington Dc, which decided way back in ’06 to design something a bit different. And we loved it. Scrolling is done manually, without any javascript wotsits.

Beca Lonroth

http://www.lonnroth.info/beca/

beca

Designed and developed by Olof Lönnroth Beca is a hot musician from Sweden, and Olof’s Sister. The scrollTo function is courtesy of Travis Beckham – of Squidfingers fame. The code is particularly clean and works cross browser, and doesn’t have the fingerprint of something like jquery. Well done all round guys.

Evanescence

http://www.evanescenceuk.co.uk/index4.php

evan

Quite a high profile music site, and a guilty pleasure for myself, – but I’m no goth before you ask. Again uses horizontal tiny scrolling to scroll.

Plurk

http://www.plurk.com/

plurk

Plurk is one of the more well known side scrollers in the list. It is a competitor to twitter and displays updates on it’s social timeline left to right. You can easily scroll through your history using this timeline. It utilises a custom scrolling script alongside Ajax components to only request the data that you need.

Luke Larsen

http://lukelarsen.com/

luke

Luke has created a horizontal scrolling site to rival many others. Using a “fish bowl” concept, you can almost feel as if you are underwater. Great stuff.

Hotel Oxford

http://www.hotel-oxford.ro/en/

oxford

A beautiful designed horizontal scrolling hotelier from Romania, from the creative people at desero. Uses Mootools. and a good bit of custom Javascript.

Benek Design

http://benekdesign.com

benek

A brilliant side scrolling portfolio site from Benek Lisefskia a New Zealand based designer. Site uses horizontal tiny scrolling as its javascript engine, and has the option for manual scrolling.

Synthetic

http://synth.tc/

synthetic

A colourful, yet minimalist design, Synthetic infatuation are a design agency that care. Site uses Prototype’s ScrollTo for the fancy javascript colour bars. Lovely.

Mussatto

http://www.mussatto.com.br

Mussatto is a Brazilian Childrens retailer that utilises side scrolling alongside beautiful vector graphics to great effect. Uses some of the code written by Olof Lönnroth which is a bit cheeky, but achieves similar results. Great design non the less.

mussatto

Museum of Modern Art – elasticmind

http://www.moma.org/exhibitions/2008/elasticmind/

mom

Design and the Elastic mind has one crazy navigation. Created in flash – this one is worth a look if you if you fancy something a bit different. The site scrolls horizontally and vertically. Compulsive viewing.

Resources

JQuery
ProtoType

Horizontal Tiny Scrolling
JQuery Serial Scroll
MooFx ScrollTo Demo
Creating a side scrolling page effect with Scriptaculous
Creating a side scrolling page effect with MooTools
Portfolio Design side scrolling Tutorial
The Horizontal way

Filed in: Web Design
Tagged with:

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Comments (10)

Trackback URL | Comments RSS Feed

  1. Kumail.H.T says:

    Nice list,

    I have also used a scrolling portfolio.

    Edited. Links don’t show any scrolling portfolio as far as I can see. Backlinks removed to show I won’t be tolerating spam kings.

  2. manu says:

    Great and useful list.
    Thanks.

  3. David Airey says:

    One of my favourite horizontal scrolling sites has got to be Blue Vertigo:

    http://www.bluevertigo.com.ar/bluevertigo.htm

    A fantastic resource for all things photo.

  4. Janet Martin says:

    This is exactly what I was looking for. Thank you very much.

  5. Benek says:

    Thanks so much for including my site!

  6. Captain Matt says:

    Oww.. the future is a scrolling blogroll – pressed-down, shaken-together and rolling out to the blogosphere!

    How do I install this idea for featuring my Christmas Tree on my WordPress site, please?

  7. Mould Maker says:

    It seems so many plug-ins here . but is there some plug-in only slide from left to right ? Thank you for sharing!

Leave a Reply

Back to Top