Parallax Scrolling

Parallax is an effect where the position of an object seems to be different when viewed from
different positions. Parallax motion, or in our case, parallax scrolling, then gives us the illusion that two objects in the same line of sight, but with distance between them, seem to move at different speeds. If you've ever looked out a car window while driving at 100 km per  hour down a highway, you'll notice that the electricity poles seem to zip by at a high pace,  while the mountains in the background seem to move by really slowly, almost at a standstill. This is parallax motion in action.

As far as the web goes, we can induce a parallax effect on containers that have background images and text above them. In its simplest form, parallax scrolling will cause the content to scroll as normal, and the background to remain stationary. The beauty about this technique in its simplest form is that it only requires CSS. Let's dig in.

Parallax Scrolling egs:

Below is a sample HTML markup for the Pure CSS Parallax Scrolling:

No comments :

Post a Comment