Parallax Scrolling, Responsive Design Make Nice

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.