recent curated

news posts

 

d:r Feeds

How to Add an Awesome Parallax Banner for Your WordPress Site permalink

Source: vandelaydesign.com

Steven Snell / (0) / posted over 2 years ago / flag this / read more

The parallax effect has been used in the movie industry for a long, long time. Also, cartoons make great use of this simple technique. The general idea is to have 2 overlapped items moving in different speed ratios, to create an illusion of depth. Parallax effects can work great even for websites. We can see many uses out there, and today we’ll take it a little deeper and create a banner making use of this technique. The main challenge here is to do something simple because we’re dealing with dynamic content so everything will change pretty often. Our effect will need, for example, to automatically detect heights, since the only fixed dimension will be the width. Also, we’ll learn how to do that on the top of a WordPress theme, in our case the Twenty Eleven theme (default theme), but you can easily use the concepts and snippets here to apply on your own theme. How to Add an Awesome Parallax Banner for Your WordPress Site Photo credits joeymc86

Add your dialogue below. Simple html (‹b›‹i›‹em›‹strong›) is OK, but make sure to preview your comment first! Oh, and please be nice!


 

related content

News posts

 

How to Add an Awesome Parallax Banner for Your WordPress Site

 
 

How to Code an Awesome Categories Menu for Your WordPress Site

 
 

How To Make A Custom Twitter Feed For Your Website

 
 

Best Membership Website Plugins for WordPress

 
 

The A to Z of Business Cards for Freelancers

 
 

12 Awesome Keyword Tools for Your Website

 
 

Indestructible Website: How to Build an EM Based Layout that Won't Break

 
 

Tod & Billie Musing #4

 
 

35 Photoshop Tutorials for Realistic Results

 
 

How To Make An Effective Layout For Your Brochures

 
 

How to have an effective website as a Web Designer

 
 

20 Beautiful Dark Designs for Inspiration

 
 

65 Resources for Nature-Inspired Design

 
 

Create a Penguins Illustration Tutorial for Global Warming Cause

 
 

Add Wings To Create a Dark and Sexy Angel/

 
 
 

Projects

 
Five Pines

Five Pines

 
 
Flat Earth

Flat Earth

 
 
Boudoir Photography

Boudoir Photography

 
 
Architectural Model Briefs

Architectural Model Briefs

 
 
Evoka Website

Evoka Website

 
 
Atoms Apple

Atoms Apple

 
 
Ruby the Red-Eyed Tree Frog

Ruby the Red-Eyed Tree Frog

 
 
Terry Eagleton

Terry Eagleton

 
 
How to Slice An Onion

How to Slice An Onion

 
 
golf tournament and birthday

golf tournament and birthday

 
 
Illustration work for St. Joesph's Parish

Illustration work for St. Joesph's Parish

 
 
How to Build an Android

How to Build an Android

 
 
Hibrid Audio

Hibrid Audio

 
 
Vera Project Logo T-Shirt Designs

Vera Project Logo T-Shirt Designs

 
 
Dyscalculia

Dyscalculia

 
 
 

Inspirations

 
How to Design a Cover in 1:55 seconds

How to Design a Cover in 1:55 seconds

 
 
Does Your Website Send the Wrong Message?

Does Your Website Send the Wrong Message?

 
 
Digital Painting in Photoshop - Episode 6: Brush Tool

Digital Painting in Photoshop - Episode 6: Brush Tool

 
 
the search for a new cover of J. G. Ballard's “Crash”

the search for a new cover of J. G. Ballard's “Crash”

 
 
How To Avoid Being Taken Advantage Of By Clients When Freelancing

How To Avoid Being Taken Advantage Of By Clients When Freelancing

 
 
Rick Poynor: How to Cover an Impossible Book

Rick Poynor: How to Cover an Impossible Book

 
 
Creative For A Cause

Creative For A Cause

 
 
Insight Design Conference

Insight Design Conference

 
 
15 Awesome Portfolio Designs For Your Inspiration

15 Awesome Portfolio Designs For Your Inspiration

 
 
The Sphere of Thinking Design

The Sphere of Thinking Design

 
 
PSD to XHTML

PSD to XHTML

 
 
John MacLean new book entitled A to B.

John MacLean new book entitled A to B.

 
 
Designing Film Posters

Designing Film Posters

 
 
Pixelnotes

Pixelnotes

 
 
My Daily Electronic Pilgrimage

My Daily Electronic Pilgrimage