50js

50 Websites that make amazing use of javascript

Since the rise of Javascript frameworks like jQuery, Mootools and Prototype, developers created stunning javascript solutions and effects for their websites.

Here are 50 inspiring Websites that make good use of Javascript, Websites which I have bookmarked over time for inspiration purpose.

Some of them are selected purely on look and feel, some have really extraordinary Javascript functions implemented.

They are grouped in several categories but within these categories they are listed in no particular order.

Tabs

aviaryAviary – http://aviary.com/

Aviary uses very sleek tabs with a nice fading transition to give visitors a short introduction to the service. The javascript improved dropdown menu is very nice as well.

toolani

Toolani – http://www.toolani.de/

Billig telefonieren – (translation: cheap phoning), is not the only thing this german startup offers: the website includes very nice jQuery tabs at the bottom of the yellow content box along with various other effects like ajaxed form validation and a sliding login button.
podcasttuneup

Podcasttuneup – http://www.podcast-tuneup.com/

Slick tabs with an interesting slideup/slidedown motion. You should also check the sleek transparent login form, that fades in as soon as  you click the login button.

adworks

Adworks – http://www.adworks.ro/

The tabs lack a stylish fading transitions like the aforementioned examples, but I really like the big icons, since they are really begging for a click =)

wearesofa

We are Sofa – http://www.madebysofa.com/

A good example if you want to use your tabs with some text instead of icons

Sliding Content – Transitions Everywhere

monofactor

monofactor -http://www.monofactor.com/

The redesigned monofactor website shows recent portfolio entries in a neat contentslider.

alexbuga

Alex Buga – http://www.alexbuga.com/

Alex Buga, self proclaimed Webdesign Superstar, slides his recent entries horizontally. Be sure to check out his neat main menu as well. Last but not least the site makes heavy use of ajax.

coda

Coda, one Window Web development – http://www.panic.com/coda/

This one is already known by everyone and their grandmother but always a good site to draw inspiration from, so no way this site could be ignored.

arcinspirations

Kobe – http://www.arcinspirations.com/kobe/

A very sleek sliding content box along with some flash particles that are moved to the currently selected menu item, make this one a very unique experience.

dibusoft

Dibusoft mmdv – http://www.dibusoft.com/

Dibusoft uses a content slider that scrolls the image horizontally and the text vertically. The main menu uses a stylish javascript-lavalamp feature.

jasonjulien

Jason Julien – http://www.jasonjulien.com/

The light grungy portfolio site of Web Designer Jason Julien uses a horizontal sliding transition to display the content.

engageinteractive

engage interactive – http://www.engageinteractive.co.uk/

I like the way the menu adjust while the content slides into place.

juanidw

Juanid W. Hanif – http://www.jwhanif.net/

Nice overall look and feel of New York based Webdesigner Juanid W. Hanif.

omnitech

Omnitech incorporated – http://www.omnitech-inc.com

Omnitech created a neat  vertical slider that displays the content with a sleek transition below the lightning bulb.

quicksnapper

Quicksnapper – http://www.quicksnapper.com/

The listing of todays websnaps built within a content slider. I’ve never seen such big buttons before =)

joshsmith

Josh Smith – http://www.joshsmith.ca/

If you don’t look close you could believe its a flash based Website.

qlear

Qlear Interaction Design – http://www.qlear.nl

Content slider at the head of the page for a short introduction. The drop shadow of the font makes this one stand out.

giantcreative

Giant Creative – http://madebygiant.com/

The name says everything: big buttons, big fonts, big slider =)

taptaptap

Tap Tap Tap – http://www.taptaptap.com/

Uses neat content transitions along with moving and fading menu buttons

oxfordhotels

Hotel Oxford – http://www.hotel-oxford.ro/

This one looks like flash, behaves like flash, but ain’t flash.

One Page Websites and Portfolios

The following websites have one thing in common: they make heavy (ab)use of scrolling windows, so I will not comment them any further =)

bryankatzel

Bryan Katzel – http://www.webleeddesign.com/

mellisahie

Melissa Hie – http://melissahie.com/

volll

volll humane communication – http://www.volll.com/

youloveus

you love us -http://youlove.us/

tomaspojeta

Tomas Pojeta -http://www.pojeta.cz/

carrotcreative

Carrot Creative – http://carrotcreative.com/

nofrks

Nofrks Design Studio – http://www.nofrks.com/

vidgetlabs

Viget Labs – http://www.teamviget.com/

dannyblackman

Danny Blackmann – http://dannyblackman.com/

kineticcreations

my kinetic Kreations – http://www.neftysworld.com/

djfolio

DJ Folio – http://www.djfolio.com/

jedarecords

Jade Records – http://www.jedarecords.it/

Imageslider and Newsticker

authenticstyle

authenticstyle – http://www.authenticstyle.co.uk/

This would fit in the previous category as well, a sleek one page portfolio with a neat image slider.

trashstars

Trashstars – http://www.trashstars.com/

Image slideshow with Ken Burns effect

designflavr

Designflavr – http://www.designflavr.com/

Nice Newsticker

haxed

h4x3d.com – http://www.h4x3d.com/

Transparent Newsticker and a sleek menu

Various Effects – some of them only seen in flash until now

phpcli

phpcli – http://cliframework.com/

amazing particle movement, done by javascript

vitaminj

Vitamin j Kommunikation – http://www.vitamin-j.de/

Content loaded via ajax and flash header controlled with javascript

komodomedia

Komodomedia – http://www.komodomedia.com/

Guess this one was featured a million time before, but time after time again I am amazed by the small details which can be found everywhere on the page. Check out the foliage-o-meter which controls the density of the plants =)

kyan

Kyan – http://kyanmedia.com/

Sleek transition from preview images to  text if you put your mouse cursor above one of the 3 featured images.

gas

Green any Site – http://www.greenanysite.com/

A  nice page curl effect only known from flash, now also used with javascript. Created by Elliott Kember (http://www.elliottkember.com/)

playgroundblues

Playground Blues – http://www.playgroundblues.com/

A very sleek sidebar menu which hides if not used.

cssmoon

CSS moon – http://www.cssmoon.com

A stylish carousel that displays the latest items of this CSS Showcase

creativdad

Creatividad – http://2d2.es/creatividad/

Nice mainmenu picture overlay effect on mouseover

dragoninteractive

Dragon Interactive – http://dragoninteractive.com/

Fantastic Glow effect if you hover over some of the menu items

mariusroosendaal

Marius Roosendaal – http://www.mariusroosendaal.com/

Never seen such a brilliant presentation of workpieces before. Mootools makes it possible.

paramorellred

paramore|red online marketing – http://paramoreredd.com/

Nice slider of recent and featured projects

pikaboo

Pikaboo – Where Ideas Grow – http://www.pikaboo.be/

With the flash animation on the right side oen could easily think this is a full flash site but the portfolio slider is controlled by javascript.

nebonmedia

Nebonmedia – http://www.nebonmedia.com/

A heavy styled lightbox

helldesign

Helldesign – http://helldesign.net/

Last but not least: a neat portfolio slider with lots of trancparencys.

67 replies
Newer Comments »
  1. Matt says:

    Thanks for the list.

    Just a comment about the websites (not your article) – some sites overuse Javascript without realizing that it slows down on the clients computer and some of them use such animated navigation that it makes it difficult for the end user.

    Otherwise, great list. I loved the website graphics in general.

  2. ALI says:

    HELP ME,
    PLEASE I WANT MAKE WEBSITE BY JAVA BUT HOW?
    I want my clients choose the types of foods , the tables , outstandings , forks and dishes of all kinds, from the website, and test size of the table on the place, after you enter the size of the venue for the ceremony.
    thanks,
    ALI

  3. hermes kelly bag says:

    HELP ME,
    PLEASE I WANT MAKE WEBSITE BY JAVA BUT HOW?
    I want my clients choose the types of foods , the tables , outstandings , forks and dishes of all kinds, from the website, and test size of the table on the place, after you enter the size of the venue for the ceremony.
    thanks,
    ALI

Trackbacks & Pingbacks

  1. [...] Außerdem verfügt es über 128 MB Arbeitsspeicher. Auf dieser Veranstaltung 50 Websites that make amazing use of javascript | Kriesi.at – WordPress Themes and HTML Templa… wurde die einen speziellen Antennenanschluss.Als Betriebssystem dient ein der zehn Tage vor [...]

  2. [...] sie durch ein auf der Upanishaden, die Bhagavad Gita, der Hatha Yoga Pradipika, In der lähmt 50 Websites that make amazing use of javascript | Kriesi.at – WordPress Themes and HTML Templa… Die International Gatka Federation veranstaltet auch bei dem auf die geistige Konzentration, die [...]

  3. [...] Darüber hinaus dienten 50 Websites that make amazing use of javascript | Kriesi.at – WordPress Themes and HTML Templa… Tzatziki, Zwiebeln und Salat macht und 13.Die bekanntesten sind 12. Als Döner-Mordserie mehr [...]

  4. [...] und problemlosen Umstieg auf neue, leistungsfähigere Hardware oder dar. .com/.net/.org/ 50 Websites that make amazing use of javascript | Kriesi.at – WordPress Themes and HTML Templa… Euro mtl.05.06.2010 21 34 L500-164 Tastatur entfernen Hallo,ich würde gern Ressourcen [...]

  5. [...] und angebrochene Tzatziki, sich immer der Selbstdarstellung. Beim Erwerb mehr Tzatziki, Zwiebeln 50 Websites that make amazing use of javascript | Kriesi.at – WordPress Themes and HTML Templa… und Salat macht und dann relativ grob verteilen vorher mit sollte. In antiken Tzatziki zuerst [...]

  6. [...] es über 128 MB mittels vierer Bedienung mit bekannt. Es ist eine Variante des gleichen 50 Websites that make amazing use of javascript | Kriesi.at – WordPress Themes and HTML Templa… eine Bedienung mit mehreren Schiebeschalters bedient.Das in der neuen Modellbezeichnung also eine [...]

  7. [...] There are several blogs that have complied lists of examples of websites that make good use of JavaScript including this one, which lists 50 examples of the exceptional use of JavaScript – http://www.kriesi.at/archives/50-websites-that-make-amazing-use-of-javascript [...]

  8. [...] 50 Websites that make amazing use of javascript This entry was written by Henry and posted on May 28, 2009 at 7:29 am and filed under General. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. [...]

  9. [...] 更多:http://www.kriesi.at/archives/50-websites-that-make-amazing-use-of-javascript javascript and jquery [...]

  10. 令人叹为观止的JavaScript应用站点…

    随着诸如 jQuery, Mootools, Prototype 一类的 JavaScript 框架的崛起,Web 开发者们基于这些框架创建了众多令人叹为观止的效果。以下的50个站点全部基于 JavaScript,却拥有 Flash 一样的绚丽效果。在很….

  11. [...] 50 Websites that make amazing use of javascript | Kriesi.at – new media design (tags: javascript inspiration) [...]

  12. [...] Calculator Converts size in pixels to em units. SitePoint HTML, CSS, JavaScript Reference 50 Websites That Make Amazing Use of JavaScript Great JavaScript site for Newbie’s Understand the Basics of JavaScript jQueryListNav [...]

  13. [...] 本文国际来源:http://www.kriesi.at/archives/50-websites-that-make-amazing-use-of-javascript 中文来源:COMSHARP CMS 官方网站 82们推荐文章: 李彦宏在北大本科生毕业典礼上的讲话 [...]

  14. [...] 本文国际来源:http://www.kriesi.at/archives/50-websites-that-make-amazing-use-of-javascript [...]

  15. [...] 50 Websites that make amazing use of javascript | Kriesi.at – new media design (JavaScript,AJAX,WebS… [...]

  16. [...] – Part I – Design (thewebsqueeze.com)      Looking forward to the rest of this series. 17/  50 Websites That Make Amazing Use of Javascript (kriesi.at)      See great examples of javascript integration. 18/  Bokeh Type [...]

  17. [...] 50 Websites that make amazing use of javascript Since the rise of Javascript frameworks like jQuery, Mootools and Prototype, developers created stunning javascript solutions and effects for their websites. [...]

  18. [...] 50 stron, które w niesamowity sposób używają JavaScript @link | 2009-01-29, 09:16:10 | Web Development [...]

  19. [...] 50 Websites that make amazing use of javascript [...]

  20. [...] 50 Websites that make amazing use of javascript | Kriesi.at – new media design Great Post with some Amazing sites that use javascript to its full potential! (tags: design list website amazing selection showcase programming webdesign inspiration cool javascript lists development webdev blog jquery ajax gallery animation blogs navigation interactiondesign) [...]

  21. webeame.net says:

    Usos interesantes de Javascript en 50 webs [en]…

    Diferentes ejemplos de uso de javascript….

Comments are closed.