Parallax Scrolling, Responsive Design Make Nice

Michael Garrity — Thu, 09 May 2013 18:40:00 GMT

Responsive design is top-of-mind these days for website owners and designers, alike. Plenty of developers are also talking about another hot new trend sweeping the Web known as parallax scrolling.

If you haven’t heard, parallax scrolling is where different layers of a Web page move across the screen at different speeds as the user scrolls up or down, allowing for a site contained entirely in a single page with sectional transitions taking place through the act of scrolling. And if you’re unfamiliar with responsive design, it’s a tactic that designers employ to ensure that a website or page renders in an optimal, user-friendly way on any device that someone may be visiting from.

However, while both of these topics are of interest to many Web developers, it can be difficult to make them work together, largely because of the technical complexities that can be involved in parallax scrolling. But one solution to this problem is the jQuery plugin known as Cool Kitten, a framework collection of HTML/CSS and JavaScript files that creates a beautiful, and responsive, parallax scrolling effect.

The plugin was created by Jalxob using Treehouse, Stellar.js, Normalize.css and other resources. It is currently available on the open source project hosting service GitHub.

Get Started with Parallax Scrolling

Michael Garrity — Thu, 23 Aug 2012 19:00:00 GMT

The strides made in website design since the inception of the Internet are often taken for granted these days. But if one actually takes the time to consider how much more advanced some site’s are today, it’s actually pretty mind blowing.

One such development is parallax scrolling, a popular trend in modern Web design in which the different layers of a Web page move across the screen at different speeds as the user scrolls up or down, allowing for a site contained entirely in a single vertical page (or horizontal, as you’ll see in some examples) with sectional transitions taking place through the act of scrolling.

Parallax scrolling gives webmasters the opportunity to add unique and engaging visual effects to their sites. And although it may not be ideal for every type of website – specifically those that are content heavy – it can be a great way to show off new products, develop a brand’s image, improve time-on-site and more.

Five Awesome Examples of Parallax Scrolling

If you want to get an idea of how parallax scrolling can be used to enhance the experience of a website visitor, check out these five awesome sites:

Air Jordan 2012

The official page for this year’s Air Jordan shoes from Nike features multi-faceted parallax scrolling.

Cantilever Fish & Chips

The website for this English restaurant allows visitors to scroll down to view its four different pages, each accompanied with its own unique background that changes as the user moves down the page.

David Beckham

Believe it or not, this fancy site isn’t actually the English soccer star’s official website, but rather a tribute made by a big (and very talented) fan of his.

International Watch Company

Many may think that the wristwatch industry is in decline, but the website for the IWC proves that it certainly has what it takes to keep up with the times.

Mario Kart Wii

My personal favorite – the official site for the Wii version of the popular Mario Kart video game series takes a second to get used to, because as you scroll down with your mouse, the site actually begins to move to the right (or left when you scroll up), with each “page” acting as a checkpoint along the virtual track.

Six jQuery Parallax Scrolling Plugins

Typically, parallax scrolling is implemented on a site in one of two ways: using either a combination of CSS and JavaScript or using jQuery plugins, which is probably the simpler method, especially for those of us who aren’t professional Web designers.

Here are six of the Web’s best jQuery plugins that make it easy to incorporate parallax scrolling onto your website:

'Net Features : parallax scrolling

Parallax Scrolling, Responsive Design Make Nice

Get Started with Parallax Scrolling

Five Awesome Examples of Parallax Scrolling

Air Jordan 2012

Cantilever Fish & Chips

David Beckham

International Watch Company

Mario Kart Wii

Six jQuery Parallax Scrolling Plugins

Stellar.js

Scrollorama

Arctext.js

Scrolldeck.js

Curtain.js

Spritely