Parallax scrolling is an enthusiastically discussed topic in the world of web design. Champions of the trend see it as a revolutionary way to engage and endear visitors to an assortment of web offerings. And while parallax does have its detractors, the overwhelming majority of designers, users, and site owners can’t get enough of the awesome animated effects.
There is, however, a problem with parallax, or at least a perceived problem. As anyone who’s spent time in frontend development can tell you, it’s not so easy to implement. Fortunately, this is a problem with an easy solution.
Most of the design-oriented artistic types who want their websites decked out with this advanced functionality don’t have the development experience (re: coding knowledge) to put their ideas into action. Seeing as the trend has gained so much steam over the last two years, however, every web builder worth its salt has been scrambling to put an easy implementation solution into effect.
Today, we’ll take a look at a artistically designed websites that each have parallax scrolling implemented that didn’t require any coding whatsoever.
Professional Design Software Suites Webydo and Adobe Muse
Our first set of immersive examples comes from the two heavyweights in the design world: Webydo and Adobe Muse.
Webydo
Webydo’s sophisticated cloud based SaaS allows professional web designers complete creative control of their designs–down to the individual pixel. This comprehensive aesthetic oversight is obviously a very attractive feature and it’s played no small part in the cultivation of the Webydo community—one which boasts more than 100,000 professional graphic and web designers.Scrolling Animator
Webydo has recently unveiled the world’s first code-free Parallax Scrolling Animator. This unique feature allows professional designers to imply depth, define scroll events, and determine motion paths in their designs.
The animator comes as a direct result of an extensive, unorthodox, and egalitarian development process open to Webydo users through a popular vote. The idea behind the vote is to provide Webydo’s community of professional designers an avenue of providing direct feedback, as well as a sense of ownership of the platform itself. Webydo users suggest features within their forums, vote for the best ones, and the winners of the votes serve as the roadmap for development. Once the votes are counted up, the ideas are developed, and included within the platform.
Needless to say the results of giving designers more control and a powerful parallax animator have been very impressive.
The Death is coming site somehow manages to make a flat design feel three dimensional. This gory iteration of a choose-your-own-adventure story rotates trees around a flat-designed White Walker holding an adorably doomed infant. Giving depth to something that by definition, should be superficial. This is a paradoxically cool use of parallax scrolling.
* * *
CBDesigns manages to bring your focus to the center with all of their animated effects, which is what you really want to see on a parallax scrolling page: animations with a purpose.
* * *
This bespoke wedding dress -maker Hosana Frossard’s website features subtle, elegant, and almost intangible animations which glide across your screen to direct your attention to the relevant content, or fade out gracefully as you scroll downward. All of this combines to give visitors an immersive experience necessary to persuade them into converting.
* * *
Filled with warm colors and delightful imagery that’s so high quality you can almost smell the roasts, Cafeteria Dona Merces provides a visceral experience with more subtly engaging parallax functionality wherein we see a close up image of the coffee grounds in the background. It brings the focus back on the appetite for caffeine even as we scroll through the Cafe’s history and attractive gallery of coffee and sweet foodstuffs.
Adobe Muse
Along with Webydo, Muse is another web builder which caters more to the professional design crowd, rather than average website owners with no coding/design experience. In fact, Adobe’s original stated purpose for Muse is to provide graphic designers with a valid, code-free solution to putting together websites with stellar design. And that purpose is dynamically advancing.
This web builder is truly comprehensive. It allows users to build a website from the ground up, adding each and every image, element, content piece, button, header, footer, menu, form, tab, and any other on page add-on you can imagine. The font options in Muse are really something to behold. Since it’s an Adobe product, it has the benefit of being integrated with Typekit, and therefore has access to a gigantic selection of web fonts for you to easily implement in your designs.
The famously complex interface has added yet another feature which just so happens to be the subject du jour: parallax scrolling. Seeing as Muse is built for professional graphic designers specifically, the examples we’ve chosen are indeed a sight to behold (no pun intended).
Here we begin to see why some software is slated for professional use. Multiple moving elements and manifold parallax animated effects make this site a must see.
* * *
The tinke is cute, quirky, and highly mobile. Its website puts that point across loud and clear. Follow the animated object on its journey down the page to learn all about its unique attributes.
* * *
Out of focus origami in the foreground is only the beginning of the depth on this page. There are a ton of moving parts to this page that must be seen to be believed.
Amateur DIY Parallax Providers: Jimdo and Squarespace
For the final installment of our series of web builders with immersive capabilities we’re showcasing two services with enhanced functionality aimed at the amateur user: Jimdo and Squarespace.
Jimdo
Jimdo is a popular WYSIWYG web hosting service that also offers an online web builder. It was founded in 2007 and is especially well suited to editing in iOS. Unlike Webydo or Muse, however, Jimdo is more geared toward the amateur crowd, rather than professional designers.
They offer premium themes that require little to no coding or customization. Basically, it’s a minimalist turnkey service that will get you up and running with your web presence. Additionally, they offer some premium themes with parallax elements implemented.
While the service certainly isn’t as versatile as the other web builders in our list, Jimdo has everything the average user would need to produce a usable and navigable website, including drag and drop functionality and a blank canvas editor.
We’re switching gears from the advanced functionality of Webydo to a far more pedestrian parallax example utilizing Jimdo, courtesy of a Polish firm: Norla designs.
* * *
“Simple” is definitely the appropriate term to apply in this instance. An uncomplicated background image serves to highlight the site’s content, which scrolls quite naturally in front of the image. The light fixture is briefly obscured only to reappear once you’ve scrolled further down the page. This minimalist design is dominated by white space while the parallax scrolling gives it a little extra oomph.
Squarespace
Now that you’re familiar with what’s possible from the higher end web builders (Webydo/Muse) and the lower end parallax providers (Jimdo), it’s time we accelerated things a bit with the creme de la creme of DIY web builders that are targeting amateurs as their main market: Squarespace.
Squarespace works via the use of three separate editing systems. The layout editor is the most impressive as it allows a great deal of flexibility in adding, deleting, and rearranging on page elements via drag and drop functionality. The Editing mode helps you customize your headers, footers, and sidebars to spec, and the Style mode lets you choose your fonts, sizes, colors, and so forth. This web builder is perfect for the design layman, who couldn’t code to save his/her life, and doesn’t want to shell out the cash for a professional designer.
Recently, Squarespace unveiled its new Marquee theme, which offers parallax functionality. The following examples showcase some of the impressive results possible with the parallax-enabled theme.
A quick note from the creator of this admittedly impressive Squarespace offering:
Imposter! Yes, one parallax site with a few lines of CSS added in managed to sneak into our list, but this will serve as a good control for you to judge against the completely code-free solutions. Even with the added CSS the site is relatively uncomplicated. A full page image adorns the background while an image grid covers it up as you scroll down, revealing the standard “About me” info at the bottom of the page. All in all, an attractive entry, regardless of the cheating.
* * *
Now we’re getting to the good stuff, namely multiple images moving at noticeably different speeds. This Marquee theme website by Bump (a nonprofit dedicated to providing high quality prosthetics to the disabled, go donate!), also provides a powerful example of just what kind of parallax scrolling Squarespace is capable of offering.
* * *
I don’t want to lie to you people. This website is on here because “Salvation Taco” is the coolest name for a restaurant I’ve ever heard. The attractive and artful combination of mexican food and Catholicism strikes just the right chord of sacrilege to give me a healthy hankering for some authentic Tex-Mex.
But don’t let my affinity for fish tacos disqualify this site from receiving an honest appraisal. The color scheme is a sexy triadic, the imagery is classically gorgeous, and the parallax scrolling adds depth and movement to a delightful bit of satire that really benefits from both.
Your articles and listing are inspirational.
ReplyDeletequality wordpress themes