Parallax scrolling is not a new trend, but it has been slowly gathering speed. When parallax effects are teamed with other current trends, you can end up with an amazing site full of eye-candy that will most certainly keep visitors on your page.
In this round-up we have selected some sites that have done just that with amazing results. All of these sites are worth visiting for inspiration.
Parallax Scrolling in Web Design
This freelancer’s single page site includes not only parallax scrolling, but some very nice illustrations and animations.
Tag Heuer Wishes 2015
This famous watch-maker has constructed this site to celebrate the sports people and teams they have sponsored during 2014. The site is presented almost as an infographic, and includes such achievements as ”Cristiano Ronaldo crowned best European player for the second time”, ”A great year for the best Japanese player, Kei Nishikori” (Tennis), and concludes with ”2015 will be just as thrilling”. Very nice parallax scrolling effects and animations.
Vodafone – Czech Republic
This Vodafone site is a beautiful example of pure parallax scrolling.
In a similar way to the Tag Heuer Wishes site, this is an infographic-style site showing the evolution of the Porsche car throughout the decades. The pages scroll upwards so you don’t feel as if you’re scrolling down the page, rather that the current page is being taken away from the top.
Galapagos – Visit Ecuador
This site promoting Ecuador’s Galapagos Islands starts off as a horizontal parallax scrolling site, when you reach the screen shown below and click on the ‘Continuar’ link, you are taken to a beautiful vertical parallax scrolling site with some nice scrolling animations. You can even download a selection of wallpapers from their site.
This Russian site uses a golden-orange color throughout, and they also include a lot of geometric shapes and designs in their parallax scrolling site.
This site follows the original rules of parallax scrolling – the watercolor-painted background moves a lot slower than the foreground content as you scroll down the page – nice to see a site going back to basics!
Anatomy at 1220
This site for a Miami gym uses a transparency on the full screen image on the landing page. As you scroll down this parallax scrolling site, the text moves gently in from the left or right on each section.
This Italian site uses a few current trends, along with parallax scrolling. There are some scrolling animations, hollow buttons are uses throughout, and the whole site is monochrome.
Have You Met Janet
This is the portfolio site of Canadian graphic designer Janet Straker. There are black and white images of Janet as you scroll down, and solid blocks of bright yellow containing content scroll upwards above the images.
Big Eye Deers
There are some nice things going on throughout this site. On the landing page, the large white headline text randomly changes – the ‘We love’ remains in place, while the end of the sentence cycles through such things as Doughnuts, Magento, WordPress, Our Clients, Cups of Tea…. The parallax scrolling is a shutter-style effect, where the sections move upward as you scroll down.
As well as using parallax elements to simulate a space environment, as you scroll down, only the center text moves – and this is in fact the main menu of the site.
The Royal British Legion – Follow The Poppy
This is a great educational site by The Royal British Legion, which is a charity that raises money and awareness for military veterans and families of ‘the fallen’. November of every year paper poppies are sold and are worn by any and all self-respecting British person! “The Legion created the Poppy Appeal to help those returning from the First World War. A century on from the start of that conflict, we’re still helping today’s Armed Forces families in much the same way, whether coping with bereavement, living with disability, or finding employment.” This site shows where the money raised is spent. It has some great effects including parallax elements.
This site is a beautiful example of parallax scrolling teamed with other scrolling effects. The whole site is a pleasure to scroll through.
Another site with some very nice parallax scrolling effects. They also use flat design, long shadows, transparencies and minimalism in their presentation.
This site starts off content-heavy, and finishes off image-heavy. The parallax scrolling effects definitely help you to stay interested, stay on the page and keep scrolling!
Qmusic – Titanic
This site has facts about the sinking of the Titanic, the team that discovered and reached the wreck, and 100 years after its demise, the film starring Leonardo DiCaprio and Kate Winslet. Qmusic held a competition where the winner got to visit the wreck of the Titanic in a submarine. The parallax scrolling takes you down to 3000m under the sea, where a small submarine follows your progress. A wonderful example of parallax scrolling.
This is simply a stunning example of parallax scrolling and deserves a visit! Notice all the awards on the right side of the image below… they can’t all be wrong!
This site explains the plot of the movie Inception. The parallax scrolling effects are superb – the background moves horizontally while the foreground scrolls vertically. I am not sure after reading this that you would even try to watch the film – it all sounds very, very complicated!
Oakley Airbrake MX
Perhaps with such a huge brand name we should expect great things from Oakley – but the parallax effects on this site are not just great, they are amazing! This is probably the best parallax scrolling site in this round-up, and quite possibly the best on the net right now – it really does have to be seen!
There are many jQuery plugins available to help with the creation of stunning parallax effects, but of course, designers and developers also need great inspiration and imagination to bring an amazing site to fruition. Hopefully this article has helped with the inspiration side of things.
Have you created a parallax scrolling site? Do you have a favorite parallax scrolling site that we missed from this list? Please share your opinion and links with us in the comments section below.