JavaScriptFeature

40 top examples of JavaScript

Jack Franklin, Rey Bango, Addy Osmani and Stephen Fulljames pick their innovative examples of JavaScript for your inspiration.

JavaScript creates platforms that can engage a user and ensure that they remember your site and continue to revisit. It can be used to create games, APIs, scrolling abilities and much more.

The web is full of great examples of JavaScript being used to bring a website to life and provide great user experiences. Here, pro web designers and JavaScript experts Jack Franklin, Rey Bango, Addy Osmani and Stephen Fulljames pick their favourite examples of JavaScript in action for your inspiration.

01. Multeor

Top examples of JavaScript
Multeor is written in plain JavaScript using HTML5 Canvas

Multeor is a multiplayer web game developed by Arjen de Vries and Filidor Wiese and designed by Arthur van 't Hoog. The idea of the game is to control a meteor crashing into earth. You score points by ensuring you leave the biggest trail of destruction. Up to eight players can connect to a single game simultaneously.

Multeor is written in plain JavaScript using HTML5 Canvas and backed with a Node.js server to manage the communications between the desktop and mobile devices using WebSockets.

Rather than using one of the many game libraries, Wiese built entirely from stratch. "We decided not to use a prefab game engine," he says, "which means rendering the graphics, detecting collisions, keeping track of entities and coding a particle system for the explosions. Not depending on a specific game engine was great fun: it gave us a lot of creative freedom and we definitely learned a lot because of it."

02. CrimeTimeline

Examples of JavaScript
The CrimeTimeline uses public APIs to pull in data about crime in Britain

The CrimeTimeline is a weekend hack project from developers at agency Cyber-Duck. The project uses public APIs to pull in data about crime in Britain and enables the user to review their local area.

"We wanted a responsive site showing a heatmap of crime density and type for the month chosen on a slider. The heatmap, street map and location search were built using the Google Maps API v3," say Cyber- Duck devs Alex Miller and Gareth Drew.

"We used jQuery and the jQRangeSlider plug-in to generate the date slider at the bottom of the page and to manage the Ajax calls. The site updates the map through JavaScript when it detects any user interaction. When users click on an area it shows the number and types of crime a mile from that point. The crime bubbles were made using CSS and animated using jQuery."

03. Philippa Gregory

Examples of JavaScript
"JavaScript then enhances the user experience by providing a fluid UI and interactivity," Gatenby comments

Second up is the website for international author Philippa Gregory, who wanted a website to launch alongside the new BBC One series The White Queen, which is based on her novels.

"The analytics from her previous website showed us that the split between devices was around 40 per cent tablet/mobile and 60 per cent desktop," says Adam Gatenby, head of digital at agency behind the site, Better. "Using responsive web design was part of the solution to address this issue."

The site was built on a FuelPHP CMS and Gatenby's team used JS to build on top of that. "JavaScript then enhances the user experience by providing a fluid UI, interactivity and smooth segues between different areas of the app. The News area infinitely scrolls, making use of Isotope to aid dynamic and intelligent arrangement of posts and social feeds."

04. Haraldur Thorleifsson

Examples of JavaScript
Frontend developer James Dickie used JavaScript to create the site of designer Haraldur Thorleifsson

The site of designer Haraldur Thorleifsson was created by frontend developer James Dickie."Initially my plan was to keep the use of JavaScript to a minimum: I was just going for feature detection (via Modernizr) and some simple little helpers where CSS alone wouldn't quite cut it." says Dickie.

"As the site developed, we had an issue with the weight of some pages, so I built a loading screen – using window.onload/setTimeout event – that hid away any tricky layout problems until we ready to reveal them."

Dickie also utilised some plug-ins to save time. "I used bxSlider for the carousel in the footer. This was a decision principally made for expediency, but this particular plug-in was chosen as it was flexible enough to re-skin for the varying responsive views."

05. Here Is Today

Top examples of JavaScript
Here Is Today required a small amount of JavaScript to put the animation in place

Here is Today was created by designer Luke Twyman. He explains the motive behind the site: "Being fascinated by the scale of time, I wanted to create something that would clearly give people a sense of that vastness, and a feeling of where we sit in relation to all that's gone before. To do this, two important features on the technical side would be some kind of zooming/scaling mechanic, and also a super clean layout."

Twyman kept all widths relative to make the site's message convey equally well on a smaller screen: "From the start I decided to do away with pixel measurements and pt sizes for type, and instead set my own measurement unit based on a fraction of the screen width. I set one unit to be 1/22 of the screen width and positioned and scaled everything using that unit, so the spacious layout would be maintained on different displays."

It took just a small amount of JavaScript to put the animation in place: "The zoom mechanic is based on a simple tween animation formula, which I've used numerous times now, although I'd never used it in JS before. In fact this is only the second thing I've built using JS, but I've found the transition from other languages I've used or tried to be fairly easy, and there's plenty of great documentation at hand online."

06. Tweetmap

Examples of JavaScript
Tweetmap represents countries in the world proportionally based on numbers of tweets

Tweetmap by Pete Smart and Rob Hawkes represents countries in the world proportionally based on numbers of tweets. Hawkes explains, "Tweetmap brings together lots of clever technologies, including TopoJSON, D3.js, Node.js, PhantomJS, and an algorithm to construct contiguous cartograms in real-time.

"We chose Node.js to power the server side of things as it's quick, flexible and we already had experience using it to scrape tweets. For rendering and animating the map (in TopoJSON format) on the client we use D3, which is a fantastic library for data visualisation. Specifically, we extensively used the geo module, which allows you to do some complex geographic calculations and conversions."

To prevent performance problems in the browser, Smart and Hawkes use D3.js on the server to render countries and generate contiguous cartograms. "However, we actually run it on the server using PhantomJS (a 'headless' WebKit rendering engine) and transmit the maps back to the client," says Hawkes. This prevents the performance hit experienced when generating the cartograms on the client. "The browser locked up for four seconds," explains Hawkes.

07. The Trip

Examples of JavaScript
The Trip is an interactive film with audio, powered entirely through JavaScript and HTML5

The Trip is an interactive film with audio, powered entirely through HTML5 and JavaScript (with Flash nowhere to be seen). The complexity of the project proved challenging, as developer Otto Nascarella explains. He says, "Most of the difficulties we had during the development process were due to the lack of cross browser/devices consistency of HTML5 new technologies, so it was decided we'd 'recommend' Chrome for a better experience on desktops," he says.

"The JavaScript code uses jQuery for almost everything - even though I flirted with the possibilities of using Zepto - I wrote two plugins for jQuery, [used] TextBlur to animate blur on fonts using text-shadow, that did not get used the end, and also TextDrop, the one that is responsible for the typographic animations."

08. Si Digital

Examples of JavaScript
Si Digital's animated homepage was all done through JavaScript

This JavaScript site is Si Digital's new-look portfolio and blog. This grabs the attention via its intriguing homepage animations, all done through JavaScript. Lead developer Alex Crooks explains that the homepage "guides the user through our services, with liquid moving through tubes activating an animation at each stage.

"To achieve this effect I used jQuery .animate(), using its step() option to work out where the liquid was in the tube - and if it needed to activate any other animations on its journey," says Crooks. He adds, "Everybody reads at different paces, so we tried to find the right balance for the liquid speed. However, if it's too fast for the user, it [the animation] will always wait at the next stage for them to scroll down.

Pointing the way

"To 'open' new stages for the liquid to flow through I used the jQuery Waypoints plug-in," says Crooks, "which was also used to trigger the text fading in, and other various loading/waiting animations so users that skip ahead still get a great experience."

The interactive timeline on the team page, which enables users to drag with their mouse to see some of the company's past work and events, makes use of jQuery UI. "The team page has a timeline to highlight Si digital milestones and events, pulling in our social media accounts ranging from Twitter updates to Dribbble uploads," Crooks explains. "The timeline is generated entirely dynamically based on a database of our events loaded via Ajax. The primary way to navigate the timeline is by dragging with the mouse (using jQuery UI draggable), but keyboard navigation is also included."

09. Jean Helfenstein

Examples of JavaScript
Create gorgeous patterns with your mouse on developer Jean Helfenstein's homepage chase

Developer Jean Helfenstein's personal site features an eye-catching canvas animation on the homepage. "I really had fun with the backgrounds," says Helfenstein. "I always love to experiment with new technology, so I decided to use my landing page as my playground and mess around with three.js and the canvas element.

"The idea was to create a site that follows the current minimalist design trend [but adds] something fresh. To achieve that, I decided to use click-and-drag navigation rather than the usual left/right arrows. With mobile devices becoming more popular, I feel that people are starting to be familiar with this type of interaction."

Everything about the site is impressive, including the subtle animations between pages - and in particular, the way you can drag between projects on the 'Playground' page. It's a brilliant showcase of what can be achieved with some of the newer technologies we have available.

10. Nick Jones

Examples of JavaScript
Nick Jones moved from Flash to JavaScript for his redesigned site

Nick Jones's redesigned site caught our eye with some clever animations. Jones has more experience in Flash, but tried the JavaScript route to see what it's capable of. "Once I got started, I realised the syntax is the same as ActionScript, so the transition felt totally natural after only a short time," he told us. "Access to the mouse wheel is something I never had in Flash, so it was a fun new interaction to play with."

Jones (who wrote a controversial article on responsive web design for our sister site, netmagazine.com) used JavaScript to capture events and enhance them. "I wanted a responsiveness I couldn't achieve with CSS transitions between classes," he goes on, "so I relied heavily on JavaScript to dynamically update the CSS properties on mousewheel and mousemove events. Scrollbars are dead, so I made the page itself draggable."

Jones was pleased with his results. "If you're thinking of jumping from ActionScript to JavaScript, don't wait another second. I made this site using heavy JavaScript interactivity to see if it was capable of what I've come to expect from Flash. I was impressed."

11. KIKK Festival

Examples of JavaScript
We love the falling feathers!

The KIKK Festival site, produced by Dog Studio, needed a strong identity and immersive experience, which creative director Henry Daubrez set about delivering. "We had three main interactions needed to achieve this goal: falling feathers, a draggable timeline program and a nice and sleek page transition," he summarises. "The most touchy (but killer) JavaScript feature is probably the program timeline that can be linked from every page and loads a specific part of the program if needed."

A common trend is to use HTML5 pushState to allow the user to go back and forward between transitions. "The page transition is visually the most interesting feature," reckons Daubrez. "It's been composed with a dynamic URL rewriting using the history.pushState feature, so it gives the impression of travelling in an horizontal single page."

Dog Studio made full use of some quirky jQuery plug-ins to produce the falling feather effect: "For that we simply used a Snowfall jQuery plug-in we modified to give the feather rotation effect, and get more control over the number of items and their speed. Those three main directions really make us think we managed to get a unique experience."

12. MapsTD

Examples of JavaScript
MapsTD harnesses the power of Google Maps for an immersive gaming experience

MapsTD is a tower defence game, but with a difference. You tell it where your home is, and through the power of Google Maps, it will produce a game in which you're defending your hometown, with the baddies relentlessly charging past the streets and houses of your neighbourhood.

Creator Duncan Barclay explains how it works. "It's obviously built using the Google Maps API, with MooTools being used for the other aspects of the UI and as a general-purpose JavaScript library. It uses several bits of functionality provided by Google Maps. As well as the map itself, the biggest part is the route finder API, which is used to work out the paths the enemies follow. Once you've picked a start location, it does a lookup to get the latitude and longitude. It then looks for four routes by adding or subtracting a fixed number from that latitude and longitude (to get a point due north, due east, and so on), and uses Google to find a path between the two."

Creeps

As the game progresses, more enemies (or 'creeps' as he has called them) appear on screen. Barclay found himself battling to keep performance high and timings correct: "One of the biggest challenges – one that still isn't quite right - was the timing. Firstly, if the page isn't active, most browsers reduce how often they check if timeouts have reached the end, resulting in creeps moving in bursts rather than moving steadily. I ended up fixing that by pausing the game when the tab loses focus. The detection code was taken from David Walsh's blog and is in the game credits.

"The other problem was that as you progressed, there were too many things happening, which resulted in the game slowing down a lot. The workaround ended up being to use harder creeps rather than more of them, and making the game incrementally more difficult each level after level 50."

13. Command and Conquer

Examples of JavaScript
Command & Conquer is back, and it's online, thanks to Aditya Ravi Shankar

This is an amazing example of how powerful today's tools are. Aditya Ravi Shankar has used them to create an online version of classic real-time strategy game Command and Conquer.

Recreating the original 1995 game was a long and painstaking process, says Shankar. "Every little thing took time - things like selecting single units or multiple units; being able to select by drawing the box from left to right or from right to left; making sure the panning was smooth; figuring out a decent fog of war implementation; allowing for building construction, dependencies (the Power Plant is needed for the Refinery, which is needed for the Factory) and building placement (buildings cannot be constructed on top of other buildings); and depth sorting when drawing so units could move behind buildings and trees."

It's only when the development tasks are itemised in this way that you realise just how much work went into the project, including some very complicated logic - making it even more impressive that the entire thing could be achieved using only HTML5 and JavaScript.

14. Glimpse Catalogs

Examples of Javascript
Glimpse: Exploring the depths of both JavaScript and CSS

Online shopping has been taken in a new direction following the launch of Glimpse Catalogs. Developed as a partnership between the Windows IE team and TheFind, Glimpse Catalogs is a merging of TheFind's shopping search engine and its successful social shopping app on Facebook. As part of the project, the team released the framework created as part of the development which relied heavily on Turn.js, a flipbook library for JavaScript.

"Our goal, from the start, was to implement Glimpse as a web app and not just as a plain website," TheFind's co-founder and CTO Shashikant Khandelwal explains. "This resolution led us to explore the depths of both JavaScript and CSS while building Glimpse.

"We employ a model-view-controller paradigm wherein both server-side and client-side templates render the model represented in Thrift or JSON, depending on the computational power of the client (desktop or tablet). We use both jQuery and custom-built JavaScript libraries in our application."

Page turn effect

Khandelwal also describes the usage of Turn.js. "While developing magazine-style catalogues, we used Turn.js - an open source jQuery plug-in flexible enough to be adapted to our needs. We also liked that it was managing the page turn effect entirely with DOM elements."

Complex CSS and JavaScript was used to transform plain 2D images into a more immersive experience: "We converted the static 2D images into a more dynamic 3D experience by including shadows and stacking pages, to give it the appearance of a magazine," Khandelwal continues. "Additionally we integrated product highlighting and hotspotting overlays to make the pages more interactive.

"Both of these together helped create an HTML5 magazine with interactive markup. It also gave us a great deal of satisfaction to contribute some of our code back to the developer community."

15. Chrome Web Lab

Examples of Javascript
Chrome Web Lab: complex JavaScript at its best

Chrome Web Lab launched as a partnership between Google and agency B-Reel. It's available online to all, but is also featured in the London Science Museum. The Lab relies heavily on WebGL but also features some complex JavaScript, in particular the use of the canvas element and heavy use of three.js, a lightweight 3D JavaScript library that supports both canvas and WebGL.

16. Red Bull Music Academy Radio

Examples of Javascript
Red Bull Music Academy Radio, bringing kickass beats to your browser

Red Bull is the energy drink that keeps fingers moving during late-night coding sessions: couple it with music and you have an awesome setting for code cranking. Looks like Red Bull gets this: its Red Bull Music Academy Radio brings kickass beats to your browser.

RBMA Radio is all about standards, and using Modernizr helps it get there. From a feature-detection perspective, Modernizr continues to be the best choice for enabling you to leverage new HTML5 and CSS3 features in a cross-browser manner, and the fact that it's continuously updated ensures that as new features come out, you can scale your code to handle them.

Client-side MVC has really generated a following, with Backbone.js (which the site uses) being a popular choice. It's well-designed, lightweight and well-maintained. All this leads to a nice fluid design that also includes dynamic loading of tiles (an endless page feel) as you scroll down: a cool effect, nd one of the best examples of JavaScript we've seen.

17. One Millionth Tower

Examples of Javascript
One millionth tower: Bringing together residents, architects, animators, and web developers

This breathtaking JavaScript, WebGL and HTML5-powered documentary tells the story of transforming physical spaces in a 3D virtual landscape. Born from the National Film Board of Canada's Highrise project, one of the main ideas behind the experiment was to bring together residents, architects, animators and web developers to demonstrate how communities can help build a better web together.

"We're exploring the human experience of vertical living in global suburbs over several years using many kinds of platforms," explains director Katerina Cizek. "In One Millionth Tower I was interested in harnessing the imagination of the people who live inside to re-envision the bleak spaces around the buildings.

"The other problem the project faced came when creative technologist Mike Robbins brought in the idea of putting a story about space into 3D space, so it became a story about transforming the physical world, by transforming the virtual world."

Weathered look

What got me excited about this site was that it both lives and breathes, a lot like the web - if it's actually raining in the Toronto Highrise, it's also raining in One Millionth Tower. If you've ever used weather APIs, you'll know this isn't a technically difficult feat, but integrating it into virtual landscapes is something I haven't seen done until now.

One of the core tools that made One Millionth Tower possible was Popcorn.js - a library by Mozilla featuring some work by Boston-based hack loft Bocoup. Popcorn helps link real-time social media, news feeds and other content directly into online video in real-time, enabling developers to easily create rich, interactive experiences that go beyond traditional static video on the web. Three.js was also used to help implement the 3D world around the high-rise neighborhood.

While a static video version of One Millionth Tower is also available, I recommend opening up a recent version of Firefox or Chrome to enjoy the complete experience the documentary has to offer. As examples of JavaScript go, they don't get much better.

18. Nouvelle Vague

Examples of Javascript
Nouvelle Vague: a useful tool implemented with JavaScript

Nouvelle Vague is a fascinating way to follow the journey of your tweets from French web design agency Ultranoir. In addition to being a useful tool implemented with JavaScript, Nouvelle Vague also features some gorgeous WebGL animations thanks to Daniel Salazar and Cedric Pinson. The fun HTML5 video used as an introduction is actually just a teaser for what the full 3D experience has to offer once you enter a hashtag to use a data source.

It took three people about four months to create, says Ultranoir's JB Grasset. "We were very interested in all the WebGL experiments running on the web and became convinced that Ultranoir had to try something with this new technology. The Ro.me project (ro.me) really astonished the whole team, so we decided to produce our own experience.

Interactive exploitation

"The basic idea was to exploit the atmosphere we created for the Ultranoir V3 video introduction. It was produced with 3D tools and we wanted to make it interactive.

"As we love Twitter, it seemed obvious to use its dynamic and concise content. The primary goal of this project is innovation. From HTML5, CSS3 and JavaScript to WebGL, we have to explore the latest technologies. We also believe that this language will become the 3D standard in the future, with its incredible quality rendering, rich interactions and responsive possibility."

19. The Convergence

Examples of Javascript
The Convergence: A JavaScript and HTML5 game that will remind retro-gaming fans of Super Mario Bros on the SNES

Cynics may say HTML5 is still playing catch-up to Flash in the gaming world, but it's finally getting closer to matching the smooth, arcade experiences gamers have been desperately pleading for.

One such game that demonstrates this is The Convergence, a JavaScript and HTML5 game that will remind retro-gaming fans of Super Mario Bros on the SNES.

Sound idea

While not without its flaws, The Convergence is a great proof of concept game implementation. If you enjoy playing it, you can look forward to more features in the future including extra levels and a particularly important addition - HTML5 audio.

I'd also be interested to see some support for the Web Joystick/Gamepad API Mozilla have been showing off lately; it's bound to make games like this even more entertaining!

20. Kindle Cloud Reader

Examples of Javascript
Kindle Cloud Reader: An impressive feat using standard web technologies

Carrying all my books in a slim, lightweight tablet is amazing. So when Amazon announced its new web-based Kindle Cloud Reader, I was thrilled the convenience level had been pushed up several notches.

The new web app makes 'buy once, read everywhere' a reality. It utilises client-side technologies and libraries including HTML5 and its related JavaScript APIs, the jQuery and jQuery UI JavaScript libraries, several jQuery plug-ins and home-grown source code to finally piece things together.

For example, the team leveraged Kelvin Luck's jScrollPane plug-in to provide CSS skinning of scrollbars to match their UI. And continuing the consistent UI theme, the jQuery Templates plug-in was used for building and rendering standard templates of data.

Interim database

Amazon also elected to use WebSQL for offline support. While not the W3C standard, this web database implementation seems to have provided the team with an interim solution until IndexedDB is more widely used and implemented.

Being an avid Kindle fan, it's really exciting to see what Amazon has built and that it was able to do so using standard web technologies.

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection