20 Really Awesome Javascript Driven Single Page Websites

Written by Kevin Liew on 23 Nov 2010
74,652 Views • Inspirations

Introduction

If you're looking for what javascript can do for your upcoming website, look no further, check out this post :) I have carefully filtered through all single page websites and I found these 20 awesomely made website with javascript. Simply awesome! Once again, I'm blown away by the capability of javascript.

What you can find in this list? It's not just sliding up and down, but integration of different javascript effects plus cool animations that you never knew it can be done with javascript. Feel free to drop a comment if you think your website is cool enough and deserve to be listed as well, otherwise, help me to spread this post :) Thanks.

  • Guide Touch
    Guide Touch
    Flipping navigation menu, drag the content area to view the content
  • Milan Zivkovic
    Milan Zivkovic
    Different background color transition, sliding content
  • Image Mechanics
    Image Mechanics
    Awesome page transition, scrollable gallery
  • Orman Clark
    Orman Clark
    Sliding content, Parallax effect in portfolio section,
  • Subsero Ice Cream
    Subsero Ice Cream
    Sliding content, tab interface and infinite carousel integration
  • Hire kenny
    Hire kenny
    Special modal window with mouse move event attached
  • Art goes everywhere
    Art goes everywhere
    Fading menu and modal window
  • AW Digital
    AW Digital
    Flash like page transition, keyboard navigation
  • Scribble Tone
    Scribble Tone
    Fancy animation to display content
  • River Man
    River Man
    massive accordion to fit pages, menu animation
  • Riot Industries
    Riot Industries
    Really cool navigation menu
  • t3kila
    t3kila
    Cool Rotation effect
  • Face
    Face
    massive accordion to fit pages, menu animation
  • Sage Media
    Sage Media
    "2 way" image slider
  • Mobily
    Mobily
    SVG rotation effect in the logo, carousel
  • Vrasa
    Vrasa
    Custom background color, sliding content
  • Cahoona
    Cahoona
    Sliding content, Spin wheel effect
  • ACME
    ACME
    Tooltips, scalable vertical accordion
  • Conway Anderson
    Conway Anderson
    Palallax effect, slide down modal window
  • Ralph Flores
    Ralph Flores
    Cool modal window with image gallery, fading menu
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

9 comments
kevin Admin 14 years ago
Hi Brian, nice one. I like your footer :) One thing though, I think there is a bug in portfolio section. The modal window overlapped with each other. keep it up :)
Reply
Florian 14 years ago
I love entirely javascript driven websites, they're really fast in response, pleasant to use etc. I often did them in the past. Sadly, I had to stop.

There's a bunch of issues:
1) Googles crawlers can't index them
2) Google adsense and google analytics can't report on them
3) URL Sharing sites and shorteners often mangle away anchor parts of URLs
4) URL screenshot sites can't take screenshots of them
5) html validation sites can't validate them
6) facebook sharing can't get their title, description and pictures
7) article listing sites don't allow them

So this means, you can do fully javascript driven sites, but the content you put on them will be damned to obscurity because the only ways to drive traffic to them can't deal with these sites.
Reply
kevin Admin 14 years ago
Hi Florian, you got your point there. Funny enough, it's sound so familiar. Apparently, all the points you've mentioned, are also the problems of a flash website :)

Thanks for you opinions.
Reply
Brian 14 years ago
I am working on a single page javascript. Check it out here: http://b5designs.com/beta/

Let me know what you think.

Thanks!
Reply
Luigi 14 years ago
Very good sites! But are very useful?
Reply
kevin 14 years ago
Nice list, some good inspiration!
@Brian, pretty slick, i like it, although we've seen this nagivation quite a few times before. The fadein/out of the menu is interesting. Maybe could be cool to sort the folio's elements by using some js too.

Btw, the captcha is really annoying.
Reply
jean-yves 14 years ago
Hi.
Thanks for sharing.

Design of sites are well. But there are only simple websites.

Here you can see a site using a lot JQuery and very usefull for customers of my clients (BtoB)
http://www.axsmusic.fr/main-page

Reply
mike 14 years ago
Did anyone not notice how "similar" the River man and Face sites are to each other?

Who ripped who?
Reply
Jezen 14 years ago
Yeah, I noticed that "similarity" last week when I first noticed this site. What I do quite like though, is the effect where the text changes on mouse hover. I know how to do this from state1 to state2, but I don't know how to make the text cycle through different states, like state1 for a second, state2 for a second, state3 for a second, then back to state1 and so on. Any help is appreciated.
Reply
Shawn Boyle 14 years ago
Florian, not sure what you mean there mate. I designed the Sage Media site on here. Here is what I have noticed.

1) Google has indexed the site
2) I get google analytics reports on the site constantly. That is how I discovered this site.
3) with bit.ly, I have not had any sort of isue with url shorteners
4)I have seen screen shots of this site plastered everywhere
5) W3C has no problem validating this site at all. Go try it
6) what article listing sites are you talking about?

I will grant you there are some limitations, a skewed bounce rate, etc. but how did you arrive at your conclusions?
Reply