{"id":502,"date":"2013-11-05T03:01:51","date_gmt":"2013-11-05T03:01:51","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=502"},"modified":"2013-11-05T03:01:51","modified_gmt":"2013-11-05T03:01:51","slug":"great-examples-of-parallax-scrolling-websites","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/great-examples-of-parallax-scrolling-websites\/","title":{"rendered":"Great examples of parallax scrolling websites"},"content":{"rendered":"

01.\u00a0La Moulade<\/a><\/h3>\n
\"examples
La Moulade features an unusual navigation widget that floats at the top<\/figcaption><\/figure>\n

An example of the growing number of sites that use the scroll position of the page to generate animation and movement, this design for French agency La Moulade also features an unusual navigation widget that floats at the top, showing both where you are, and providing quick access to other areas.<\/p>\n

02.\u00a0Marmoset<\/a><\/h3>\n
\"examples
Spotify might want to start watching its back with this new music site<\/figcaption><\/figure>\n

Set up by a team of hard-working musical artists, Marmoset helps you to create the ‘soundtrack to your story’, whilst fighting the good fight to restore value and respect for music and its creators.<\/p>\n

The killer feature here is the way Marmoset lets you find the kind of music you like according to variables such as ‘energy’, ‘length’ and ‘genre’. Some cool parallax scrolling effects and striking photography are icing on the cake, making its offering all the more compelling.<\/p>\n

03.\u00a0Health Service Payouts<\/a><\/h3>\n
\"\"
This online infographic highlights the problem of health compensation payout culture<\/figcaption><\/figure>\n

Whether medical services are provided privately or publically, the issue of huge compensation payments is a growing concern for health organisations across the globe. And this online infographic highlights the problem using an eye-raising scrolling technique.<\/p>\n

As you scroll down the page, you follow a hospital porter pushing a trolley through sections of a corridor. Each section represents a different year in the history of Britain’s National Health Service, and a pop-up balloon shows details of the biggest compensation payout of that year. It’s a simple device, but perfectly executed and an engaging way to convey a lot of information on a dry, albeit important, subject.<\/p>\n

“The pieces were built using some the latest techniques in HTML5, CSS3 and JavaScript,” explains\u00a0Stickyeyes<\/a>, the agency who created the infographic for\u00a0Express Solicitors<\/a>. “As animation was a key factor in this, we primarily used the\u00a0Skrollr<\/a>animation library for all of the motion effects. Each of the elements was manually illustrated, then we hijacked the scroll function in order to create the parallax faux-scrolling feature. This was then supported by further CSS3 animations for the finishing touches.”<\/p>\n

04.\u00a0We are Unfold<\/a><\/h3>\n
\"examples
Clever scrolling works well with a sticky top-right nav menu<\/figcaption><\/figure>\n

Here Norwegian agency Unfold uses a combination of endless scrolling and a small amount of parallax to create an unusual and effective website navigation scheme. The principal links between content areas appear at the top right of the window throughout, but when you reach the bottom of the single page design, the page continues to scroll, revealing the top of the page once more.<\/p>\n

05.\u00a0Savings Challenge<\/a><\/h3>\n
\"\"
The site helps you discover how much you could save on your car<\/figcaption><\/figure>\n

To publicise UK-based car dealership network Arnold Clark’s latest promotion, where customers are asked to ‘challenge’ the salesman in their local dealership to save them money on their monthly motoring outgoings, the in-house web team came up with the idea of a parallax site built on an infographic style – the\u00a0Savings Challenge site.<\/p>\n

“The design is based on the idea of paper money that can be folded into the key element,” said the designer, Stephen Kay. “Hence the slogan ‘do more with your money’. This folding notion helped formalise not only the initial logo design, but also the potential for a moving, interactive web page. It really lends itself to being animated.\u201d<\/p>\n

Once in development, the storyboard was split into seven key ‘scenes’ in order to help manage the workflow and the checking process. The developers used\u00a0skrollr.js<\/a>\u00a0as their core technology to handle user scroll events. This allowed for rapid prototyping, giving more time to smoothing out transitions and building a workable user interface.<\/p>\n

Technical challenge<\/h4>\n

They also made use of\u00a0grunt.js<\/a>\u00a0to assemble handlebars templates and compile their Coffeescript and SASS files. They created a task to reload the page whenever files were altered, allowing them to see changes instantly. To achieve the desired animations, the team used CSS3 3D transforms extensively.<\/p>\n

Each scene in the webpage was created as an individual handlebars template, meaning the guys could split the work between them and deal with a scene each rather than pairing up. Splitting the development between two developers – and into smaller, manageable tasks – was paramount to getting the page up swiftly and efficiently.<\/p>\n

Thanks to the handlebars and grunt, it was an easy process to thread the individual scenes together and deliver a fully-functional parallax scrolling page in just three weeks. “We’re very pleased with what we’ve managed to achieve in a rather limited time period,” the team commented. “But we’re confident that, with such strong supporting statistics, the campaign message will speak for itself.”<\/p>\n

06.\u00a0Cyclemon<\/a><\/h3>\n
\"cyclemon\"
The site features just about every bike type there is<\/figcaption><\/figure>\n

Some say you are what you eat; others say you are what you ride. Here, designers and bike enthusiasts\u00a0Romain Bourdieux<\/a>and\u00a0Thomas Pomarelle<\/a>\u00a0came together to create parallax scrolling site Cyclemon. Teaming gorgeous illustrations, inventive\u00a0typography<\/a>\u00a0and clever scrolling, the site seamlessly comes together.<\/p>\n

Going from a hipster to a grandpa, a cougar to a freestyler, the guys have come up with just about every cycle type there is. And it’s not just the website that showcases the cycles – Bourdieux and Pomarelle have also created a number of silkscreen bike prints.<\/p>\n

Each bike illustration is printed on FabrianoRosaspina white paper in five different handmade colours with a non-toxic technique. Cyclemon is definitely one for the bike-mad designers out there.<\/p>\n

07.\u00a0Lexus<\/a><\/h3>\n
\"\"
Experience the new Lexus without visiting the showroom on this interactive site<\/figcaption><\/figure>\n

The new Lexus IS is a luxury saloon car, which you can now experience in a completely immersive way before even visiting a showroom. Developed by the team at technology consultancyAmaze<\/a>, this interactive video allows viewers to fully explore the interior and exterior features of the latest edition to Lexus’ hybrid line.<\/p>\n

As Lexus’ long-term digital partner, Amaze used a combination of live-action footage and CGI to allow viewers to watch and control their viewing experience. Users can do everything from selecting the exterior colour design to understanding more about the controls, precise handling and engineering behind the new car.<\/p>\n

Easily accessible<\/h4>\n

In order for the Amaze team to create a seamless blend between the real and virtual, they filmed the car driving through different landscapes and teamed up with high-end Munich-based 3D visualisations studio\u00a0RTT<\/a>\u00a0to scan and take 360 degree imagery of the environment at key points. Built in\u00a0HTML5<\/a>, the experience works across all devices, and features as the content of an app to promote and sell the new model.<\/p>\n

“We have enabled viewers to move easily from a \u2018passive\u2019 watching experience to an active \u2018immersive\u2019 experience, where they can pause the movie to spin and change the colour of the car within the movie itself,” says Wendy Stonefield, chief commercial officer at Amaze. “We used the HTML5 Canvas to achieve this and for the interior spins, where users can change the interior colour of the car whilst seeing it in a parallax format, we fused\u00a0CSS<\/a>\u00a03D transforms and\u00a0JavaScript<\/a>.<\/p>\n

“We wanted to create a movie that was beautiful and remarkably sophisticated – something that would be true to the IS and Lexus brand. Our aim was to explain the car\u2019s attributes and allow an ultra-high-quality experience to bring the emotion of the drive directly to the viewer through full screen, movie footage.”<\/p>\n

08.\u00a0Life in my Shoes<\/a><\/h3>\n
\"\"
The About page features a lively parallax effect<\/figcaption><\/figure>\n

Life In My Shoes is a powerful multi-platform campaign aimed at
\nyoung people that challenges the fear and misunderstanding that surrounds HIV. London-based digital agency\u00a0Traffic<\/a>\u00a0was briefed with developing a website that would appeal to a youth audience.<\/p>\n

The brand font, Houshka Rounded Medium, was\u00a0implemented using font-face to give the website a\u00a0fresh look and feel. Decorative images and dramatic yellow accents throughout provide an\u00a0alluring aesthetic.<\/p>\n

The \u201cAbout Us\u201d page features a lively parallax effect that was adjusted for tablets and smartphones. \u201cWe wrote a media query for these devices that changes the background-attachment from fixed to scroll and sets the individual background-positions so that the images sit in the right place,\u201d explain the Traffic team.<\/p>\n

09.\u00a0The Beast<\/a><\/h3>\n
\"parallax
The folk singer’s site self-scrolls as a poem is read out<\/figcaption><\/figure>\n

Folk singer Laura Marling’s album, A Creature I Don’t Know, was given an accompanying website made by London agencyStudio Juice<\/a>\u00a0with 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.<\/p>\n

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.<\/p>\n

10.\u00a0The Lab<\/a><\/h3>\n
\"parallax
This parallax scrolling site is different and instantly engaging<\/figcaption><\/figure>\n

Alzheimer\u2019s Research, the UK’s leading dementia research charity, aims to communicate information about dementia in an engaging way using its website\u00a0The Lab<\/a>.<\/p>\n

From idea to treatment, users can scroll through two labs and a clinic, each of which is filled with pop-up information buttons. When clicked, new pages open with details on how scientists’ ideas are turned into reality and how this can make a difference for the thousands of people living with the disease.<\/p>\n

11.\u00a0Why Your Brain Craves Infographics<\/a><\/h3>\n
\"parallax
An infographic to end all infographics!<\/figcaption><\/figure>\n

Neo Mam Studios<\/a>\u00a0have come up with is beautifully designed and brilliantly executed infographic. An online experience built with HTML5 and CSS3, the challenge in building the infographic was to keep the\u00a0CSS<\/a>\u00a0as simple as possible.<\/p>\n

“The parallax scrolling effects were probably the most difficult to achieve,” says Neo Mam’s Danny Ashton. “Our developers looked at the available libraries and described them as a bit ‘wonky’, so they ended up creating their own instead.”<\/p>\n

12.\u00a05emegauche<\/a><\/h3>\n
\"parallax
Each page has its own scrolling mechanism<\/figcaption><\/figure>\n

In most circumstances when you scroll, you’re scrolling to a different page. But on this agency’s website, each page has its own scrolling mechanism piece or element that makes everything extremely interesting. It’s a brilliant and fun approach to parallax design and proves that the technique continues to produce inventive results.<\/p>\n

13.\u00a0Atlantis World\u2019s Fair<\/a><\/h3>\n
\"parallax
The Atlantis World\u2019s Fair use parallax scrolling to tell their story<\/figcaption><\/figure>\n

An exercise in demonstrating IE9’s WOFF support, this online infographic designed by Frank Chimero uses some parallax scrolling not as just a way to present information, but as a way to animate information and to tell the story. A fun and interesting approach to interactive information, this is a perfect example of parallax scrolling.<\/p>\n

14.\u00a0Every last drop<\/a><\/h3>\n
\"parallax
Learn about the problems of water conversion through this brilliant parallax scrolling site<\/figcaption><\/figure>\n

Animation studio Nice & Serious has created this parallax scrolling site to promote the problems of water conversion. Every last drop features a quirky little character, going about his daily tasks, through which the viewer is able to learn more about how water is wasted in our lives, often without us realising it.<\/p>\n

15.\u00a0Golden State of Mind<\/a><\/h3>\n
\"parallax
Golden State of Mind showcases the best of California<\/figcaption><\/figure>\n

Golden State of Mind was built by\u00a0JUXT Interactive<\/a>\u00a0to showcase, “art, fashion and happenings live from California”. Creative director Jeff Whitney comments: “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.”<\/p>\n

16.\u00a0Living Word<\/a><\/h3>\n
\"parallax
UK-based design agency Tribe developed this parallax scrolling site for translation agency Living Word<\/figcaption><\/figure>\n

When translation agency Living Word requested a re-energising digital relaunch,\u00a0Tribe<\/a>\u00a0took to creating a site to stand apart from the rest. The solution was to develop a parallax effect capable of delivering a large amount of information while maintaining user interest. The idea was a brave one, but it works well, delivering a stunning, interactive and intuitive customer journey.<\/p>\n

17.\u00a0Spotify<\/a><\/h3>\n
\"parallax
Spotify employs subtle use of parallax scrolling on its introductory page<\/figcaption><\/figure>\n

Streaming music app Spotify explains its features and benefits on a landing page that adds a subtle touch of parallax scrolling to its background images.<\/p>\n

18.\u00a0Madwell<\/a><\/h3>\n
\"parallax
New York agency Madwell uses parallax scrolling to add a sense of depth<\/figcaption><\/figure>\n

Design and development agency Madwell, based in New York, show off their portfolio with a range of parallax scrolling effects to create a noticeable 3D style that adds a huge amount of depth.<\/p>\n

19.\u00a0The Jacksonville Downtown Art Walk<\/a><\/h3>\n
\"parallax
The Jacksonville Downtown Art Walk<\/figcaption><\/figure>\n

The Jacksonville Downtown Art Walk is a monthly arts festival that spans more than 15 blocks and takes in dozens of galleries, museums and bars, with street performers and live music. Its beautiful site features a subtle watercolour parallax effect that makes scrolling a joy.<\/p>\n

20.\u00a0Von Dutch<\/a><\/h3>\n

The fashion label Von Dutch tells the story of its original founder by using parallax scrolling to add an element of movement. Icons and images move into and out of place as you scroll down the page, which makes the whole page seem more fluid.<\/p>\n

21.\u00a0Fannabee<\/a><\/h3>\n
\"parallax
Watch the icons as you scroll down the Fannabee page<\/figcaption><\/figure>\n

Fannabee is a site designed for fans of music artists to help show off what they\u2019ve collected. The concept is introduced using a page that keeps the visual focus front and centre, while the story is explained as you scroll down. Parallax scrolling is also used subtly with the icons in the background, as the icons in the foreground move faster than those in the background to add a level of depth.<\/p>\n

22.\u00a0Peugeot Hybrid4<\/a><\/h3>\n
\"parallax
Peugeot uses parallax scrolling to create an auto-playing web comic<\/figcaption><\/figure>\n

Peugeot has gone all out with using parallax scrolling to create an auto-playing comic in the browser. The comic plays as you scroll down the page (or use their autoplay feature which automatically scrolls) and helps to advertise the car manufacturer’s new HYbrid4 technology.<\/p>\n

23.\u00a0Cultural Solutions<\/a><\/h3>\n

Arts consultancy Cultural Solutions employs a subtle parallax scrolling effect to introduce depth to its homepage. Their main brand image is the use of colourful circles – the circles in the background move slower than those in the foreground, creating a subtle 3D effect.<\/p>\n

24.\u00a0jQuery Conference<\/a><\/h3>\n
\"parallax
Last year’s jQuery conference features some small, subtle parallax scrolling animations<\/figcaption><\/figure>\n

The website for the 2012 jQuery conference made use of a touch of parallax scrolling in order to add some animation to the design. It\u2019s the smaller, subtle effects that make the page seem more fluid, such as the logo and date becoming smaller after you scroll down. The scrolling also triggers animations – like the bicycle that starts to drift off to the right, and the flock of seagulls frantically chasing a shark – which add some personality to the page.<\/p>\n

25.\u00a0Shape<\/a><\/h3>\n
\"\"
Parallax scrolling adds shape to, er, Shape’s homepage<\/figcaption><\/figure>\n

Creative agency Shape uses parallax scrolling to help explain their design process. The animation describes the flow of how they work perfectly, and adds a nice visual touch.<\/p>\n

26.\u00a0Nintendo<\/a><\/h3>\n
\"\"
Nintendo uses parallax scrolling to take you through the history of Mario Kart<\/figcaption><\/figure>\n

To help show off the launch of Mario Kart on the Wii, videogames maker Nintendo launched a page that used parallax scrolling heavily to take the visitor on a journey through the history of the game. The style of the site follows the style of the game itself, by taking you along a road lined with characters from the game.<\/p>\n

27.\u00a0Activate Drinks<\/a><\/h3>\n
\"\"
Activate Drinks uses parallax scrolling bubbles to add a third dimension<\/figcaption><\/figure>\n

Activate Drinks is a company that provides drinks with added vitamins. To help tell its story and explain its their approach is different, it’s added an element of 3D by placing bubbles in the background, middle ground and foreground. As these layers move at different speeds, the 3D effect is formed as you scroll down the page.<\/p>\n

28.\u00a0The Whitehouse\u2019s Iraq Timeline<\/a><\/h3>\n
\"\"
The White House uses parallax scrolling to heighten the emotion of its Iraq War timeline<\/figcaption><\/figure>\n

To display the timeline of the war in Iraq, the White House used parallax scrolling to tastefully add something unique. While the content scrolls as normal, the emotional background images remain static \u2013 which help them to stand out further.<\/p>\n

29.\u00a0Pitchfork Cover Stories<\/a><\/h3>\n
\"\"
Pitchfork’s ‘Cover Stories’ series has won a host of awards for web design<\/figcaption><\/figure>\n

Renowned music website Pitchfork has gone above and beyond with its ‘Cover Stories’ series. Making its website look like a lovingly designed print magazine, the features include parallax scrolling, interactive interviews, video content and photography unlike any other.<\/p>\n

Masterminded by Pitchfork’s creative director\u00a0Michael Renaud<\/a>, their interview with British newcomers\u00a0Savages<\/a>\u00a0is the best yet. Moving portrait photography and video content by\u00a0Se Young<\/a>accompanies insightful text, whilst the music player provides the perfect soundtrack.<\/p>\n

30.\u00a0Green Man<\/a><\/h3>\n
\"\"
YCN Studio took care of the entire Green Man festival rebrand<\/figcaption><\/figure>\n

Welsh festival\u00a0Green Man<\/a>\u00a0unveiled a brand new website for this year’s shenanigans. The illustrations, colours and user experience combined make for a truly stunning parallax scrolling experience.<\/p>\n

It was developed by the team at London based agency\u00a0YCN Studio<\/a>. Green Man approached them last Autumn, with an intention of giving their branding a good old revamp – everything from the website to the wristbands.<\/p>\n","protected":false},"excerpt":{"rendered":"

01.\u00a0La Moulade La Moulade features an unusual navigation widget that floats at the top An example of the growing number of sites that use the scroll position of the page to generate animation and movement, this design for French agency La Moulade also features an unusual navigation widget that floats at the top, showing both […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/502"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=502"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/502\/revisions"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=502"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=502"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}