• Tweet

• Tweet

With new technologies like HTML5 and CSS3, it’s becoming possible to create more advanced, interesting and remarkable effects in the browser. While these effects can be gimmicky, when employed in the right way they can result in a remarkable and memorable website.

01. Alquimia WRG

Based in Milan, Alquimia WRG is a digital agency that aims to create amazing and effective experiences for brands on digital media. Clean and minimal, and only black and white, the website uses a mixture of the usual suspects (HTML5, CSS, and JavaScript) to achieve a neat package.

HTML5 canvas is used to animate the initial loading image. Subtle “parallax elements in the homepage are dynamically created and animated to simulate a 3D space environment through mouse movement,” says Andrea Bianchi, creative director at Alquimia.

The Poppy Appeal site created by the agency nonsense is one that really sticks out. A site that is strong and full of character, this charity works hard for donations, year-on-year, and this appeal website is a wonderful way to explore how the donated money is used.

The site uses illustrations and animations to educate both a young and old audience. Founder and creator of nonsense, Robbie Greatrex, says his personal favourite element on the site is the television.

Greatrex adds, “To demonstrate the life-changing work The Poppy Appeal allows The Royal British Legion to do, we designed and developed a rich, interactive experience controlled by a simple scroll of the mouse.”

There are lovely parallax-scrolling elements throughout the site that will appeal to children, and the one-page site lends itself so well to youngsters scrolling on tablets, too. Greatrex enjoyed being part of the site, and says, “This project was a lot of fun. The concept really leant itself to us being able to add lots of playful ‘easter eggs’ for the user to explore and discover.”

03. Nintendo Game Boy

This latest site celebrating 25 years of the Game Boy is as playful as they come. Created by Melbourne based web developer Petr Tichy, the parallax scrolling allows you to control the Game Boy device; playing along with a classic game of Tetris, it will no doubt harbour some nostalgic feelings for all you gaming enthusiasts out there.

With plenty of projects capturing the glory days of Nintendo, the 25th anniversary of one of its most popular consoles seems another fitting tribute. You’ll love this site if you’ve ever had a Game Boy youself.

04. Flat design vs Realism

Last year, flat design took over the world of digital design. To highlight this design trend, interactive agency inTacto created this brilliant interactive adventure Flat Design vs Realism.

“One of the principal problems was to insert the HTML5 game in the middle of a parallax scroll,” explains inTacto’s creative director Alejandro Lazos. “We wanted everything to be continuous and without jumps while scrolling, so the users could at any time go from start to finish without interruptions. To achieve this we utilized Ajax technology to pass parameters to the url, and the game which loads in a div, is in charge of collecting those parameters and display the corresponding loading screen (flat or realism).”

05. Sony

This offering from technology giants Sony is unlike any parallax scrolling we’ve ever come across to date. It was created as part of the company’s ‘Be Moved’ campaign, where they state: “A journalist once called us a guinea pig because the results of our experiments were copied by others.

“It was meant as an insult, but we took it as a compliment. Combining artistry and engineering IS an experiment but when artists work with engineers, every day is a chance to be moved.” Scroll for yourself and see what all the fuss is about!

06. Costa Coffee

This impressive one paper website, The Costa Experience, is the brainchild of Brighton-based agency Graphite Digital. Having worked previously with Costa Coffee, the team was recently tasked with better communicating its products.

The result was this visually rich, parallax website full of animated illustrations and interactive elements.

07. Highway One

This cool microsite, created by Newcastle agency Shout Digital, for luxury travel experts, Exsus, is another great example of the trend. Its delightfully retro cartoon scene takes you on a virtual trip along California’s Highway One.

The scrolling journey seats you in a classic Cadillac Eldorado 1959 starting out in the Redwood Highway, which takes you though Fort Bagg, San Francisco, Cambria, Santa Barbra, LA, and San Diego, to name but a few. At first glance the effects look quite simplistic – but as you scroll down you’ll see the site’s got a few quirky tricks up its sleeve to keep things interesting.

08. Make Your Money Matter

Finance and money are hardly the most interesting of subjects. But New York-based digital agency Firstborn are quids in with this dynamic parallax scrolling website Make Your Money Matter for the Public Service Credit Union.

With the aim of teaching the public the benefits of joining a credit union, rather than using a bank, this brilliant site includes everything from how a credit union works, where to find one and apply as well as a calculator showing just how much banks profit from customer’s deposits.

09. The Beast

Folk singer Laura Marling’s album, A Creature I Don’t Know, was given an accompanying website made by London agencyStudio Juice with illustrations by Shynola. It’s a site that self-scrolls as a poem is read out, while vivid illustrations and animations with parallax perspectives are revealed.

The site makes extensive use of new semantic elements and the data-* attributes used to trigger animations at specific audio cue points (such as scene changes, animation cues and so on) and also assigning control speeds and directions of the moving parallax elements.

10. The Lab

Alzheimer’s Research, the UK’s leading dementia research charity, aims to communicate information about dementia in an engaging way using its website The Lab.

Originally posted 2015-01-17 15:58:03.