Parallax

Like I mentioned before, Parallax is one of the most interesting current web design trends I’ve seen. It’s just so mesmerizing, watching the same image peek out from behind a seemingly static background. It gives the website depth. I wanted to find out how web developers create parallax in web design, so I first visited 1stwebdesigner.com for more information. There are four methods web designers can use to create parallax web design: the layered method (multiple backgrounds that can move independently), sprite method (one big image made up of multiple smaller images that can only be viewed at certain points), repeating pattern method (individual tiles over a repeating background layer), and raster method (pixels in an image load at different times). I find the layered method to be most attractive, simply because I’m hesitant to mess with pixels and tiles because of the potential for slow load times. From what I see, parallax utilizes HTML, CSS, and jQuery. What I find most interesting about jQuery and parallax is through jQuery, web designers can adjust the speed of the scrolling affect. While the default is 400 milliseconds, 200 milliseconds is considered fast and 600 milliseconds is considered slow. The place where this is changed is under “animate: scroll top X value”. For my next website, I want to try this out.

Source: http://1stwebdesigner.com/parallax-scrolling-tutorial/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s