Skip to Main Content

Parallax Scrolling, Responsive Design Make Nice

Posted on 5.08.2013

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.

 

WebsiteMagazineMiniLogo

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code
  •    

    The Ultimate Guide to Personalization

    Kibo