April 21st, 2008 / Ross Johnson / 68 Comments

12 websites that slide and scroll with javascript

There has been a new trend in standards based design over the last year. The effect seems to have originally appeared in flash websites some time before, but with the use of javascript and a few good libraries people have found out how to do it while still using semantic XHTML/CSS.

The effect is what I call, “The Slider.” Instead of normal navigation where you click on a link and it takes you to another page, or even dynamically loads content onto the existing page, The Slider scrolls you to a different portion of the same page automatically. Sometimes this is simply scrolling down the page to the next content block (in a slow manor rather than an instant jump). Other times people have it scroll to another portion of the page that is not in a vertical manor, maybe 4000 pixels to the right and 500 upwards. The effect being the feeling of traveling to a different portion of the page itself. Lastly some have content scroll with in the content, so rather than the whole page moving the content with in a content block my scroll in and out.

Hotel Oxford

Hotel Oxford
Hotel Oxford Website

Hotel Oxford is the first site that I had seen doing this. While the page remains stationary, the content with in the design scrolls depending on what page you click on. The fact that every page has hard borders creates a very cool effect.

Team Viget

Team Viget
Team Viget

This is the second site I had ever seen doing this effect. Unlike hotel oxford Team Viget scrolls the whole window, creating a sense of moving down a hallway and looking up and down at the different postings on the wall. Very cool effect, and really transforms the website into something more.

Danny Blackman

Danny Blackman
Danny Blackman

Danny’s portfolio site is the last type of Scoller that I have come across. His site doesn’t hide any scroll bars, and you could navigate the site normally, but he empowers you to “Save That Scroll Finger” and click on his links which auto scroll you past some very cool illustrations to the next portion of the site.

More LLC

More
More, LLC

More is similar to Danny Blackmans, in that his site scrolls downward and allows you to manually scroll if you wish. However he added an extra touch by applying a fixed position transparent PNG at the bottom that makes the site look like it is fading into the page. Nice touch.

Brian Katzel

We Bleed Design
Brian Katzel

Brian seems to be a very creative individual, seen through his designs and through his use of scrollers, background images, and transparent foreground images. While his page his another site that scrolls vertically, and doesn’t force you to auto scroll, he uses transparent images laid over a bright background image to make paint look like it is running down the page, changing shape, going through tunnels, and well…. you just have to see it because it is genius.

Melissa Hie

Melissa Hie
Melissa Hie

Melissa’s site scrolls the entire page, much like Viget. Each block of content is a different color creating a very cool effect when traveling from one to another. An interesting use of no-navigation, Melissa has you quickly bounce around here entire site one step at a time. First seeing what work she has done, then learning about her, and finally getting to her contact “section.”

Volll

Volll
Volll

Volll takes an interesting approach to the Slider type site. They have the site laid out very much like earth. The bottom of the page is deep under water, the bottom of the ocean. The top of the site is outer space. Where you start is right on land, looking over the water. As you navigate the site you are taking further into the sky or deeper under water. Creative.

Sroown

Sroown
Sroown

Scroown is a manual scroll down site, but there is a “back to top” scroller that lazily follows you as you get further down the site. While not the most scrolly type site, the use of typeography and fun scroller make it worth admiring.

Lucuma

Lucuma
Lucuma

Lucuma has fixed elements of the site, yet the content scrolls horizontally. It creates a letterbox effect and is quite dramatic.

Qlear

Qlear
Qlear

Qlear only scrolls very specific portions of the content, like the text at the top of his page or his portfolio section. It is a very visually interesting way to get a lot of information across easily. I would say this is one of the most effective ways that I have seen this effect done to communicate content.

NoFrks Design

NoFrks
NoFrks

NoFrks Design combines some of the elements we have seen in sites previous. Not only do the use the website as a space that mirrors the natural space (sky, ground, etc) but it also scrolls both horizontally and vertically. Look at their offers and you are scrolled down a highway to read a billboard, but click on their contact information and you are sent to the stars to read more.

3.7 Designs

3.7 Designs
3.7 Designs

Yeah I am gonna plug my company site. Much like Qlear we decided to scroll content with in a window, so that messages could be communicated with out going to multiple pages. We did break the site up into more pages that most sites of this style do, however we felt that was the most effect way to reach all of our website goals.

Bonus (13) Engage Interactive

Engage Interactive
Engage Interactive

Engage Interactive cleverly shifts the inside content both up, down, left, right, side to side… but keeps the frame of the site static. It creates a very cool look, giving the impression that content is just a step or two away. It makes the site quick and easy to navigate and find new content, no need for excessive page loading times or server queries. A very nice bonus!

68 thoughts 12 websites that slide and scroll with javascript

  1. Great List! Do you know of any tutorials that explain how this is accomplished?

    Thanks!

    Rich
  2. Hi Rich,

    A lot of the popular javascript libraries have the functions for a slow scrolling effect, which would achieve the pretty vertical functions that some of the sites have. Otherwise you would have to dive into the tutorials on how to scroll per each library, I know Jquery and Mootools have pretty good examples.

    I don’t know of any sites off hand that specifically say how to do it, but maybe that will be my next blog post!

    Thanks for the comment.

    ross
  3. Love the list, some really inspirational pieces…

    Ivan
  4. Pingback: Bir Süre Yazamayacağım… | Taylan Aktepe

  5. weird how this site http://melissahie.com/ looks like this site http://www.petitb.fr/ (or vice versa)

    not sure who copied the other one. (unless they’re friends or co-workers…)

    TC
  6. Yikes those are identical. Unless it is some template out there that I heave never seen someone pretty much just ripped one off. If anyone has any clues which is original I will make sure I only showcase that one.

    ross
  7. Hi and thanks for adding my site to the list.

    I like your site too. Just a quick note: in Opera a horizontal scrollbar is visible at the bottom of the page which cofused me a little so I accidentaly scrolled to the right where I found only an empty background. There are only a few percent of Internet users who use Opera but I am one of them :)

    Best,

    Dado
    NOFRKS.design

  8. Just came across your site in our stats. Thanks for the listing. I hope being 13 doesn`t prove unlucky though! 😉

  9. Thanks for the comment Alex. I hadn’t thought about that, if you start to get any bad luck let me know and I will switch you for a different number 😉

  10. Pingback: 13 sliding websites : Web Consultant Kolkata India, Web Design and Web Development Services Kolkata

  11. Some great wesites on display. I liked the way every nitty-grittys of the are attached with each websites.
    Thanks.
    :-)

  12. Pingback: Best Of April 2008 | Best of the Month | Smashing Magazine

  13. It’s an amazing selection of websites. The only limit is our imagination :)

    Now I will envy those people that work with them :) cause most of the designers around me don’t think about user experience and designing a decent UI is just too complicated for them..

  14. @ TC & Ross: unfortunately, the petit website copied me. thanks for letting me know. it’s not the first time *rolls eyes*

  15. oh, and thanks for the feature 😀 i got quite a few hits from this site!

  16. Ah that is frustrating Melissa. I really like your site however, happy to showcase it on my blog. They say that imitation is the highest form of flattery, but somehow it never seems to make me feel any better.

  17. Great collection. It’s amazing how a lot of minds can come up with an idea so similar and execute it so differently.

    I’m a real newbie (don’t have a job in the field yet) and so I feel quite proud of myself that I came up with a scrolling window for my new resume page (after several hideous designs and ui’s). I had just about given up on making a portfolio page where the whole thing scrolls, but after viewing some of the work here, I think I’ll take a crack at it.

    One question I had and didn’t have time to check on each site, is do these sites degrade gracefully if javascript is disabled?

    P.S. To answer Rich’s comment: On my site at least it is nothing more than a display div having overflow in the css set to hidden. Then there is a div inside of that positioned absolutely and links that call javascript functions to reposition the inner div. I have different css if javascript is disabled which makes the outer div overflow set to auto and the javascript links turn into anchor tag links.

  18. This scrolling page is missing

    http://www.jansochor.com/photo-essay/cockfight.html

    (source: Smashing magazine)

    Damon23j
  19. @Drevan – I have not tried all of them, but it seems that most of them do. What a lot of these sites do is use named anchors for targets and simply scroll to them slowly through javascript. So if javascript is disabled it just jumps you to the window position immediately. (except Safari for what ever reason, every other browser doesn’t seem to have an issue with it).

    Thanks for the tip on the Photo essay site. I like it, and will feature it when I get a moment!

  20. I absolutely love Bryan Katzel’s website! That scroll is disgustingly good! Unfortunately it’s not working :( even though it was working yesterday. What a bummer, I wanted to show everybody.

  21. Pingback: Kantongin » Best Of April 2008

  22. The concept behind MelissaHie.com reminds me of this work I did a couple of years back:
    http://www.russell.com/au/meetrussell/

  23. MelissaHie.com seems to be the original courtesy of http://www.archive.org

  24. yha allahım yha bu nu nasil indrcez onu verin bize bn bunları ne yapam

  25. ^ yes, that is my design. thanks for looking it up Benn! i put it up back in March 2007 (March 30th to be exact), but i guess archive.org did not pick it up right away. i emailed the owner of that site a week ago and of course he didn’t respond. typical! whatever. he wouldn’t get very far in life by copying other people’s work

    (sooo sorry i am ranting at your blog, Ross :X)

  26. Pingback: Best Of April 2008 - Glimpses of the Aleph

  27. Pingback: The Scroll And Slide Website Design Trend on Blog24

  28. Pingback: creative portfolio postings

  29. @Rich : I made a tutorial, somehow explaining my own implementation with jQuery : http://blog.cotasson.info/?jquery-showcase

  30. Pingback: links for 2008-06-02 -- A Tempest of Thoughts

  31. Tiddlywiki uses some nice scrolling effects – http://www.tiddlywiki.com/. Have a look at http://www.osmosoft.com to see it used very well.

  32. That style was pioneered by the Museum of Sex in NYC – though they’ve since redone their site, the original had the same moving panel system as melissahie.com – very cool though. Warn people that it’s got to have a good design behind it, otherwise the effect is pretty much pointless.

    Mat
  33. Pingback: Design Labs » Blog Archive » Web 2.0 Style WebDesign

  34. http://www.ingenexdigital.com/

    looks like (more like inspired by) this:

    http://www.qlear.nl/hello.php

    (notice the shadow effect too)

    Fernando
  35. Hi Fernando,

    Yup I have seen that site before and like some of the elements of it. The shadow effect in particular, so it was in some ways inspired by his use of it.

    If you notice the previous companies website I have been using the side scrolling effect well before qlear.nl however =)

    http://www.3point7designs.com

    ross
  36. I have not tried all of them, but it seems that most of them do. What a lot of these sites do is use named anchors for targets and simply scroll to them slowly through javascript. So if javascript is disabled it just jumps you to the window position immediately…

  37. I have not tried all of them, but it seems that most of them do….. What a lot of these sites do is use named anchors for targets and simply scroll to them slowly through javascript….

  38. Its really Nice to see all the works in javascript its good.

    Sarfraz
  39. thanks you very muchhhhhhhhhhhhhhhhhhhhh

  40. I like very much the writings and pictures and explanations in your adress so I look forward to see your next writings. I congratulate you.

  41. Did any body found , any Javascript Library or sample for this stuff ??

    brainHax
  42. Hate to reply to an old post, but just had to comment on the MelissaHie.com-design issue. Melissa’s site is technically pretty much identical to http://www.juliaparry.co.uk/ except that Parry’s site pre-dates Melissas site by about three years. Granted Melissahie.com looks far better (by todays standards) than Parry’s site, but it’s worth mentioning that Melissa wasn’t really the first to conjure up something like this.

    Great sites nonetheless.

    subzero
  43. Pingback: One Page Site: A Creative Idea | iCreativeLabs blog

  44. Unless it is some template out there that I heave never seen someone pretty much just ripped one off. If anyone has any clues which is original I will make sure I only showcase that one.

  45. I used an effect like that like 9 months ago on a job i had @ http://www.depueboiler.com

    The way to do it is somewhat not the best just because of cross/browser and with different resolutions and such.. If you could align pages to the bottom of browsers it’d be an awsome way to do something but unfortunatly I haven’t found a way to to do. If anyone has any idea’s email me @ klmx19@gmail.com thanks

  46. Nice list. MelissaHie is really different!

    http://www.36dpi.com is another one.
    I found it on stumbleupon

    Tony
  47. We used a large single image that scrolls around as you navigate. It’s masked so it’s a little less jarring. Enjoy.

  48. hi.. Can anyone help me learn how to give this effect?

    srk289
  49. http://demos.flesler.com/jquery/localScroll/

    Has a good demo/howto, you need a bit of knowledge to get you’re head around it.

    Matt
  50. @Matt
    Thanx a lot for sharing the link!!
    cheers,
    srk

    srk289
  51. I used an effect like that like 9 months ago on a job i had

  52. Hi,
    maybe you should think about including this gem into selection: http://www.salon-lafolie.com/

    Nikola
  53. Hi,

    last year I liked so much Hotel Oxford, first site in selection, that I realized something similar for a small clinet of mine.
    http://www.colleventobeb.com

  54. Pingback: All my bookmarks ever | Daniel John Gayle

  55. *Edit

    Nice collection. Really ads a nice touch to the overall experience.
    Check the scroll I have on my business website. It used the jQuery scroll-to library.
    http://www.se7endesign.com/portfolio

  56. We’re building a sliding/scrolling website, but are having issues with the vertical scroll bar appearing on some monitors. Is this an issue with the background images, or is there some “noscroll” code snippet that needs to be used?

    http://s12.seaintsol.com/Default.aspx

  57. I’ve just put online my new website! Vertical scrolling with jquery:

    http://www.stefanoginella.com

    Let me know what you think! 😉
    Ste.

Comments are closed.