Innovative use of JavaScript can really make a website. Web design experts 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.
1. Glimpse
Glimpse Catalogs is a merging of TheFind’s shopping search engine and its successful social shopping app on Facebook. Items are displayed in a Pinterest-style layout, with the focus on image and minimal product details. Clicking the image provides a pop-up box containing full information. As part of the project, the team releasedthe 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)," he continues. "We use both jQuery and custom-built JavaScript libraries in our application."
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 adds.
2. Tweetmap
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.
3. Nike M vs W
Nike M vs W uses running data from Nike+ to enable runners to compare runs and their performance. "In this website we collect the running data from Nike+, and allow the runners to compare their runs virtually," explains Henry Chu, designer at the Pill & Pillow studio behind the site.
"We used three.js to create the 3D visualisation: the motion was designed to display the data of two to six runners. We used two tweening libraries: tween.js and jstween to program the motions. Most 3D motions are controlled by tween.js."
4. The Trip
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."
5. Si Digital
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."
6. Jean Helfenstein
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.
7. Nick Jones
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."
8. KIKK Festival
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."
9. TakeOff Conference 2013
The website for this year’s TakeOff Conference deserves a mention for the way it uses 'bottom-up' scrolling. When you first visit the page, you are scrolled all the way to the bottom, and then are able to scroll upwards. It’s something unique that initially I didn’t think would work, but that in reality is perfectly usable.
"We created a disturbing yet stunning website for the 2013 edition of the TakeOff Conference," says developer Florian Le Goff, one of the conference organisers. "We have to pay a tribute to the modern web ecosystem for making this project a reality in such a short matter of time."
Le Goff utilised a number of projects, libraries and plug-ins: "A paid Typekit account was used to include uncommon fonts in two lines of code, while a few jQuery hacks and plug-ins were used to power our bottom-up reading pattern."
The work is largely done by the popular jQuery.scrollTo plug-in, which provides an intuitive API for page scrolling. Not all the animations were achieved with JavaScript, though: "A few CSS animations allowed us to quickly deliver an usual creative experience," says Le Goff.
10. MapsTD
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 blogand 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."
11. Command and Conquer
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.
12. Glimpse Catalogs
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 onTurn.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."
13. Golden State of Mind
Examples of JavaScript keep getting better. It’s fantastic that with advances in JavaScript, sites that two years ago would have been built with Flash can now be created using JS - and Golden State of Mind is a perfect example of this.
The site has been built by JUXT Interactive to showcase, "art, fashion and happenings live from California". JUXT Interactive’s creative director Jeff Whitney reckons its highlight is its, "unique, rotating brand showcase, allowing the user to explore the current season through images and video in an uplifting way... to a Golden State of Mind".
"JavaScript was used extensively for the Experience portion of
the GSOM website," Whitney explains. "A custom scrollbar plug-in was found and rather heavily modified to allow for the infinite scrolling, and a lot of sweat and tears went into getting the reversed scrolling to work correctly. The movement and parallax of the elements on the page were easily handled with jQuery."
the GSOM website," Whitney explains. "A custom scrollbar plug-in was found and rather heavily modified to allow for the infinite scrolling, and a lot of sweat and tears went into getting the reversed scrolling to work correctly. The movement and parallax of the elements on the page were easily handled with jQuery."
14. Chrome Web Lab
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.
15. Red Bull Music Academy Radio
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.
No comments:
Post a Comment