Creative Gallery of Parallax Website Designs

by on 30th May 2011 with 26 Comments

The limiting 2-dimensional aspect of computer monitors today constrain how websites are built. When designing parallax website layouts, these can bring effects and graphics into three-dimensional beauty right before your eyes! Often created with Adobe Flash or JavaScript libraries this effect is not often used but does offer a very unique feeling.

Below are some very creative examples I’ve put together for digital inspiration. Web designers from around the globe can gather ideas for parallax style websites. It’s not a very confusing topic, and once you’ve got a design style set in your mind it’s easy to bust out some graphics and code the whole thing together.

Rastape

Here the whole background design is representative of a restaurant chain. The main top navigation is easy to find and the animations are very sleek.

Upon first landing on the page jarring music auto-starts. This may not be the best presentation ability but it does display character. Luckily the audio player towards the top of the screen can be easily modified. You’ll also find contact details towards the bottom.

Billy’s Downtown Diner

Billy’s Diner provides an elegant sense of class to the retro theme. Displaying a beautiful page with fonts and creative colors, the website is easy to navigate.

The highlights include well-placed navigation and brilliant typography. Much of the diner feeling is applied to the header animation. This example of parallax scrolling touches upon nostalgic tones of the classic 1950s restaurant.

Atlantis World’s Fair

This is personally one of my favorite websites. The design animations are so fluent and the web developer used mostly all CSS techniques to accomplish them. Both beginners and professionals must marvel at this work of art.

As you descend into lower levels of the website you can find contact information and blank ad space. You may notice the effect is following a person down an elevator into the deepest depths of the ocean towards Atlantis. The vector artwork in stunning for visual designers across the world.

B5 Designs

With B5 Design Studio their parallax scrolling moves horizontally through navigation. The initial home page features a few links into external sources with no side scrollbar. There isn’t anything too confusing about the UI, which really stands out well.

You’ll notice all of the in-page text is written through HTML and styled with CSS. No Flash has been applied, even with images, and upon further examination the authors are powered by jQuery. This can also be seen in their Contact form which boasts handy tooltips.

Snoggle Media

This website has also been created with jQuery. You may notice they run a side navigation which pans opposite to B5 – that is vertically up and down the page. Their use of bright background colors blends well with the minimalist tones.

The site runs a blog which is powered under a similar theme. The company is most likely running WordPress 3.x with a jQuery division in the HTML. They’ve also capitalized on SEO phenomenally by offering alternate and unique URLs for Google to crawl.

Webdesign Karlsruhe

Although written exclusively in German, the website’s designer has taken careful consideration into endorsing parallax scrolling. The whole website appears as a first-person view towards a wooden backing.

Notes are placed as navigation and the designer includes examples of his past work. The portfolio style he renders appears much more dynamic than many. This may be another great use of the jQuery library at work. Clicking an image brings up a preview and further information towards the project.

FillStudio

Fill Studio is an elegant example of very minimalist thinking. You can find examples of soft color tones all throughout their website. The main page is lacking in a lot, but the navigation is simple and keeps the visitor focused on only a few tasks.

Their portfolio page is very impressive and demonstrates beautiful artistic works. Each is designated a unique color scheme which displays upon mouse hover. They also show more project information and contact links.

Kalendiar

When I think of unique Kalendiar stands out above the rest. Their site focuses on a similar first person view of a seemingly clutter landscape. Typography and graphical imagery is spread out and demonstrates a bit of confusion.

I really hold a lot of respect for their unique style of art. It’s very difficult to design websites, especially something so complex. I find their title holds a lot of power, plus the fact their native language isn’t English and misses out on a large audience.

Headline Creative

A beautiful creative design agency which features deep, rich colors for many of their user interface components. Again you’ll find their core links and navigation trails towards the top of the site.

The parallax component is able to demonstrate unique coordinates to hold pieces of information. This style of design features a dashboard or desktop setting. Users are guided along with the links to areas where they can find company information, contact details, and example works.

Tennessee Trails & Byways

I absolutely adore the Tennessee travel website. They feature some beautiful parallax animations and even offer a brief tutorial right before the site loads. Granted it’s not difficult to work through their site but it does help the technology-impaired.

There’s a huge amount of information placed within the site. Many of the attractions listed hold Facebook pages which are linked directly from the site. All popups contain real-text and are developed under jQuery. The page actually features many menus, all of which are utilizing powerful flyout and sub-page animation techniques.

Mush Game

I love the digital vector artwork assigned to Mush. Their branding is adorable and really stands out amongst the many other websites. Featured prominently as a parallax background you can see the motion of trees and hanging branches in the forest.

You’ll notice Mush has included a brief demo video for their app. It’s featured on Windows Phone 7 and utilizes a lot of cool graphics engines! As always you’ll find brief contact information and links towards the bottom footer section.

Whip your website

Whip Your Website is a neat application with some bright features. You can enter a URL into the address bar to mess around with their layout. It’s all built on HTML5 and features a few custom jQuery effects. It’s a neat place to play around with if you’ve got 15 minutes!

Diego Chávez

Dhype isn’t the epitome of parallax designs, although it does feature a vibrant interface. I personally love the background effects. It’s funky, and really adds to the companies personality.

Most of the site links will display popups or slide pages. These include contact details and portfolio works. Since the site is low on pages it makes navigation a breeze! It’s difficult to get lost, which is good since all the information you need is focused front and center.

Netlash

The creative energies placed into Netlash’s design is extraordinary. I love their use of dashboard style navigation as it brings so many of the background images to life.

You are able to scroll vertically throughout the different pages. This allows for navigation without links or jQuery sliders and also demonstrates how everything can be crawled on a single page. You’ll also notice contact details and company information change backgrounds, which presents the appeal that you’ve visited a new page.

Nicosia Longhi

The portfolio below includes so many fascinating user interface tweaks. The background music is pleasant and doesn’t interfere with browsing the layout. In fact I’d argue it’s a beautiful accent to the overall site theme.

This is accompanied by a discography of musical works and other information about contacts. All their information is also displayed in jQuery windows without reloading the page. This saves a lot of energy in the long run and leaves users feeling inspired.

GaBLé

It appears as Gable is run through a jQuery engine with blackbox popups. These are commonly used to hold image galleries and small bits of page information. The navigation menu can be found within their parallax gallery of artwork – although it is a bit confusing.

Much of the site information is well laid out and offers some pretty strong resources. I do enjoy the layout, and although there aren’t any labels on each item you can hover to find out where they lead. And it’s not so bad to just explore since each page opens up in the same window without any refresh.

Head2Heart

The gallery of cloud vectors seems to trace a path among the sky. As you follow the navigational numbers along the bottom it’s very simple to find information and paths towards what you’re looking for.

I truly marvel at this website’s unique color scheme and layout. There are so many fantastic animations which all seems so fluid in comparison. Their contact form displays some faint vector work and vibrant UI components. If you enjoy parallax websites this is certainly one to check out for inspiration.

Esteban Muñoz

Esteban’s portfolio offers a wide range of examples. His work is phenomenal and displayed proportionally at the top portion of his website. This is where you may also find navigation links which all include content onto the same page.

Parallax scrolling effects are applied heavily in his footer with hand-drawn cloud art. He features some unique external links to outside sources which sponsor his website in design galleries. This is a powerful way to build trust amongst your clients and land more project work.

Farmhouse Fare

Another horizontally scrolling parallax layout which fits perfectly into our set! The Farmhouse Fare keeps a setting of old country kitchen displayed within the background of each section. All further information is included in a popup with real text.

The whole site seems to be run on HTML and jQuery which powers the animations. You’ll find standard navigation links towards the top which represent contact details and fare awards. They create delectable pudding and other desserts and have passed down the business for years.

BeerCamp at SXSW 2011

Beer Camp uses some highly vibrant typography to demonstrate their work. Much of the heading and sub-heading titles are difficult to read even for those with great eyesight. By scrolling in our out with your mouse wheel you can zoom into the text which may seem small initially.

Additionally as you navigate between the heading links zooming animation effects are displayed. This can be seen from any of their pages and demonstrates one fantastic effect. The site appears to be written in HTML which may use jQuery font libraries.

Ben the Bodyguard

I am a huge fan of Ben’s work. He’s created a digital world within his website which allows you to navigate through dark alleyways within his city. You’ll find no physical navigation links as the only info is directed towards the very top and bottom of the page.

Ben also sets his entire gallery on one page. This means no refreshing, as is common with all of the parallax galleries we’ve seen thus far. The true inspiration here lies in the background graphics and complex jQuery animation style. I’m a fan of ben’s layout and I’d love to see other designers creating similar atmospheres in their websites.

TEDxPortland

TED is a wonderful event with some of the most knowledgeable speakers. Their website features some amazing videos, and for their Portland event I couldn’t be happier with their design choices. The whole website is based around parallax scrolling while keeping the heading in-tact.

You can navigate through each page with ease and without any refresh. The black background provides a perfect canvas for crisp white lettering to jump off the page. You may choose to scroll with the side scrollbar instead of using navigation links. However this method is much slower and it takes a bit of know-how to navigate manually.

Resolutionism

This web design company has done a lot of things right in their layout. They apply many jQuery effects throughout their pages to sparkle things up quite a bit. You can find their portfolio links quickly accessible and with a jolty bounce of animation energy.

Each case study offers a direct link to the project as well as a complementary video for any potential clients. You’ll find contact information as well as Google Maps directions towards the bottom of the page. You may sort through their individual posts in the top right corner on each panel.

David Beckham

David’s website is very minimalist which shows just how simple the transfer of information can be. Each sliding panel can be accessed through the navigation system on the right. A series of white dots are available and can be clicked as navigation sections.

The panels include a different background of David and also hold white lettering over a black background. Towards the very bottom you’ll find some resources for contact and credits. Also a fancy pixel counter which displays how many individual pixels you’ve scrolled

Ap-o

Apo runs a fantastic website with beautiful parallax sliding animations. In the lower right hand corner you’ll find an arrow which will carry you from each page section to the next. His website runs in a vertical atmosphere, which makes it much easier to scroll down without any jQuery effects.

One downside I’ve found is there isn’t much of a navigation system initially. You may find it difficult to go through each page and distinctly pull out information you need. His backgrounds are also a bit hard on the eyes which could be softened or healed a bit more.

Vampire Victim

Now this is one terrifying website. The designer included a lot of realistic artwork of vampires, monsters, and darkened alleyways to scare off even the darkest ghosts. The parallax scrolling does work brilliantly though! It’s a fantastic addition into the spooky theme.

Information is laid out vertically, which could be expected of any classic website style layout. The links and page text is a bit difficult to read as the jarring background imagery truly jumps out at you. But I have to applaud the designers in an amazing creative effort the likes of which I’ve never experienced before.

Manufacture d’Essai

One aspect I really like of their design is the inclusion of language translation. You may choose to transition between Italian or English from the right hand corner. The website menu is also hidden by default, a feature which is a bit confusing.

Their page animations are brilliant and truly feature some amazing parallax effects. The background imagery is often repeating and will carry throughout their catalog and contact pages. You’ll also find a brilliant portfolio section which also features works in a jQuery gallery format.

Elect-LO-nica

This Japanese based website also works on parallax distortion effects and vertical scrolling. You can find some neat animation effects as you scroll down which showcases some beautiful vector graphics.

All of the text is written in Japanese. However you don’t need to understand the website content to follow along with their design style. Towards the very bottom you can find a track listing and some further contact details. I enjoy their layout adaptation as it represents a very simple mindset.

Rohto Japan

Rohto Japan is a much more prominently displaced company. Their layout is again featured scrolling horizontally and offering displacing links. All along the bottom layer you’ll find social networking links and external contacts.

Above these are the main navigation links. They don’t stand out much and may even feature better along the top portion of the page, which is mostly empty. The page details are very crisp. I am also a huge fan of their animation style which is quick and fluid to transition.

Comments & Discussion

26 Comments

Comments & Discussion

26 Comments

  1. Paul Mullett says:

    Nice, quite thorough collection. But you missed me off, with “proper” 3D parallax and everything. ;)

  2. Matt says:

    For “Diego Chávez” website it is just a plagiarism of a famous french web agency http://www.colorz.fr/ ….

  3. Paul Mullett says:

    @Matt, that’s horrible. :( Hate to see that.

  4. I never steal his code and design because is a flash website, man. The french website just inspire me.
    I did this website two years ago when i was a newbie, just was an experiment btw “Great Parrallax Website design”.

  5. George says:

    Diego, you suck… I hate when the so called “web designers” do this.

  6. George says:

    An also, you’re ugly as fuck

  7. stop hating on this website, idiot. disappointed about the admin of comments

  8. Cool that you picked up the http://www.whipyourwebsite.be site we’ve done at Designskills.be

    I think you missed out on another project of us, using the parallax effect ;-)
    http://johnnyberlin.be/

  9. Ap-o says:

    Diego, shame on you. That’s a rip off…

  10. Parallax is a difference in the apparent position of an object viewed along different lines of sight. The term derives from the Greek word parallaxis, meaning alteration. In web design, the parallax effect is a relatively new trend. The effect itself has been around for a while, but lately is becoming more used and talked about.

  11. Alvaro says:

    Diego: amigo, amigo, amigo…. vaya a recogerse, una vaina es inspiración y otra bien diferente es COPY-ación usted es una verguenza para los diseñadores latinos… BTW U SUCK!!!!

  12. No me importa lo que digan, yo esta mierda la hice ya hace un tiempo pero no con el hecho de hacer que fuese reconocido por el diseño ni por nada de ese sitio es solo un experimento y punto. si les duele que copie eso yo ya lo dije es un sitio hecho en FLASH y yo solo intente hacerlo en javascript. y si a las personas que visitan todos los sitios inspiracion solo buscan copiar interfaces no sean hipócritas porfavor. Si es posible borren mi sitio porfavor yo no comparti el link con nadie mas solo comente en tympanus.com para que checaran el parallax que habia hecho no he subido este sitio a ninguna galeria de CSS o Diseño Web

  13. I dont care what people are saying about this shit, I did the website a long time ago, just was an EXPERIMENT, you guys are so hypocrits to saying we never didn’t copy. if you always go to web gallery looking fo something to copy and adapt.

  14. Jake Rocheleau says:

    Hey it’s a great collection either way!

  15. Matt Miller says:

    Great parallax gallery!!! with the exception of course of Diego Chavez website, you are a disgrace to web designers, find something else to do

  16. I hate Diego Chavez says:

    DIE DIEGO, PLEASE DIE!!!

  17. Alvaro says:

    Diego, amigo, nadie es “hater” como tu lo dices, el unico hater eres tu mismo por no darle espacio a la creatividad…

  18. I hate Diego Chavez says:

    Fuck the 18 generations of your ancestors and…

    Suck butter from my ass

  19. I hate Diego Chavez says:

    Diego, I just wanted to remind you that…

    YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK YOU SUCK

  20. Alvaro says:

    Diego: amigo, amigo, amigo… Que bueno que ya bajaste tu sitio y por favor no vuelvas a hacer otro porque seguro va a ser otra porqueria plageada

  21. I hate Diego Chavez says:

    Here’s something for you Diego:

  22. I hate Diego Chavez says:

    DIEGO, BURN IN HELL BITCH!!!

  23. Croky says:

    I’m a programmer. To me, it’s lame copying the design but replicating the idea from flash to javascript is honorable. How many of you “web’de’singers” copy the effects engine script and then just swap images ?

    Most of you look like little kids in kindergarden. Why don’t you complain to his mother or his teacher. Behave like adults please …

  24. I hate Diego Chavez says:

    FUCK YOU CROKY!!! YOU MUST BE A FRIEND OF DIEGO CHAVEZ SO, YOU SUCK TOO

  25. I hate Diego Chavez says:

    Diego, your new site suck even more. What are those things floating around, sperms? You fucking fag…

Leave a Comment

Subscribe
Membership
About the Author