CSS Tutorials

Easy Pure CSS Parallax Effect Tutorial

Parallax effect had been a fad in web and mobile design for quite sometime now. And if you’re reading this article, there’s a big posibility that you are in search of the easiest and fastest way to learn or incorporate this effect on your project.

Well, you are on the right track.

However, for those who are not familiar with ‘parallax’, don’t quit on me just yet. This might turn out to be of help to you too. I’m pretty sure you have already encountered Parallax on your iOS phones, websites or apps. It’s all around us.

As defined by the ever informative Wikipedia, “Parallax scrolling is a technique in computer graphics and web design, where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion.” 

Just recently, I had some web design projects that requires me to use the effect. And I found this pretty simple and cool way to make it.

Easy Pure CSS Parallax Effect

The CSS code “background-attachment:fixed” does the trick. And that’s basically it.

On the downside, I noticed some problems with implementing it on iOS . But dont you worry. We will be updating this post for a workaround on that.

Way to easy, is it not? Go ahead and try it on your projects.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
The following two tabs change content below.
Mark Vincent del Rosario
Mark is passionate for arts. Dance,design and illustration are just some of the things he enjoys doing. He is currently working as a Web Programmer,but his desire to be creative will always be something at heart.
  • prasad

    wow!!! Nice one..i am glad that i visited your site 🙂

    • thetotobox

      Hi prasad, Glad it helped! 🙂