Parallax Scrolling, Responsive Design Make Nice

Posted on

  • email
  • twitter
  • facebook
  • share this

share this

advertisement

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.

 

 

Custom WordPress Design Themes at 99designs.com. Get the most designs for your buck when you start a design project!


Login To Comment

forget your login information?

Become a Member

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

Sign Up

4 comments

ClicksCrazy 05-09-2013 5:30 PM

I haven't used the plugin referenced here, but have used another one in a responsive site I just launched. The parallax features is very subtle on the home page. dennysandersconstruction.com

BradG 05-12-2013 9:32 PM

@clickscrazy

That actually looks like a WordPress Theme from ThemeForest with the PlugIns Slick Social Share Buttons, Portfolio Slideshow, Contact Form 7,  and All In One Seo Pack.  

Mad awesome wicked props for content, but perhaps the theme developer should get credit for the site being both responsive and the parallax scrolling feature.

Carla Dawson 06-10-2013 8:19 AM

Hi,

Great post...We love parallax scrolling sites as a SEO Agency but we noticed that most of them do not follow onsites optimization rules (SEO) for search engines. We developed a SEO Parallax Scrolling site to see if it was possible. You can see it here www.posicionamientowebenbuscadores.com.

We used the following technologies or techniques

1. Parallax Scrolling

2. SEO

3. JQuery

4. HTML5

5. CSS3

6. Wordpress

7. Horizontal Parallax Scrolling

Thought you might like to see it.

Carla Dawson 07-22-2013 3:26 PM

Here is another great tutorial about how to do SEO and Parallax together

www.seobuzzinternetmarketing.com/.../how-to-create-a-parallax-scrolling-website-with-seo

Add to the discussion!

advertisement

999 E Touhy Ave
Des Plaines, IL 60018

Toll Free: 1.800.817.1518
International: 1.773.628.2779
Fax: 1.773.272.0920
Email: info@websitemagazine.com

Facebook


Twitter