CSS Parallax Tricks
At one time, webpages were restricted in how they were designed and presented -- content had an almost monolithic design, with few changes to text across the entire page. Such pages strained the eye and made important information hard to find. The advent of CSS has radically changed how the world creates and views content on the web with a variety of document formatting tools, including the ability to create parallax.
Other People Are Reading
-
What is CSS?
-
Cascading Style Sheets (CSS) is a style sheet language that allows you to change the look and formatting of documents. You can add CSS to the common webpage styles of HTML and XHTML or to format any XML compatible content, like documents produced by OpenOffice or SVG images from programs like Inkscape. With CSS, providers can offer a webpage to mobile devices and computers within the same framework, and allow multiple contributors to edit content submissions without having to understand webpage design or formatting commands. In short, CSS makes the Internet a prettier place to visit, and a nicer place to work without requiring extensive coding.
Parallax
-
In the early days of cartoons, animators would create the illusion of motion using a trick called parallax. In this method, multiple layers depict a scene. The background layer moves slowly in the opposite direction of travel, while the midrange layer moves at a moderate pace and the foreground elements whisk by rapidly. Taken as a whole, the effect is a bit like looking out a car window. Parallax has since became a common tool used to add dynamic motion to video games. Webpage designers have discovered ways to use CSS to add exiting motion accents to online content.
-
3D Parallax Tricks
-
The most common CSS parallax tricks involve input to function. The majority rely on resizing the width of your browser window, but some use mouse input to drive the illusion. The most common parallax effects are to create a pseudo-3D environment by taking three separate layers and using CSS styles to change the rate at which they scale. The upper two layers must contain transparencies so that the layers underneath can be seen and they must scale faster as they get closer to the top. Using CSS transitions, however, you can make your parallax scene animate on its own without input.
2D Animation Parallax Trick
-
Another trick with parallax is to create an illusion of animation using a shuttering method found in the book "Magic Moving Images." In this technique, the lowest layer contains an image that is a composite of three or more frames; these frames show a simple animation and have been sliced vertically and separated by a distance that matches the width of a viewing window opacity. The upper layer is an opaque frame with transparent sliced windows spaced to match the distances between the various slices which are wide enough to show an individual slice. As the upper layer is moved across the lower layer, the image shifts from frame to frame with the appearance of a vintage movie.
-
References
Resources
- Kremalicious: Showcasing the CSS Parallax Effect - 12+1 Creative Usages
- Marc Folio: A Parallax Illusion with CSS - The Horse in Motion
- "Magic Moving Images: Animated Optical illusions";Colin Ord; 2007
- Photo Credit Comstock/Comstock/Getty Images
