Parallax-y background effect

I’m not sure if parallax is the right term for this effect, but I really love this simple tutorial from Codyhouse. (You definitely should check em’ out!).

So what is it? Well, as per Codyhouse:

Alternate Fixed & Scroll Backgrounds

How to create alternate fixed and scroll backgrounds with no javascript, but just the help of the CSS background-attachment property set on Fixed.

If you’ve been surfing a lot in the recent months (or years), there’s this some kind of “reveal” effect when you scroll thru a page. Here’s the demo to understand it more.

Pretty simple, huh? 🙂  Here’s how I did it. BONUS: Do also checkout the code for vertically centering a dynamic content block with the use of a pseudo ghost element. (Nope, no tables).

However, do note that this parallax technique might not work well when viewed using your phone or tablet. If you’d like to have a more advanced and bullet-proof parallax effect, you might want to see Skrollr.js.

Other examples:


Published by


Who is she? To her, she sees herself as a random person just like everyone else. She’s not the type who is obsessed with make-up and hot dresses. A hideous look is what she prefers to wear most of the time for she hates being noticed and stared at. She dons plain and unflattering clothes though sometimes tries to wear fancy ones when she feels like it. For her, the ultimate heavens inside a mall are bookstores and gift shops. She’d buy sheets of neon-colored papers even if she has no plans yet on where to use them, grab every book that seems to be interesting enough to read, picks on things she finds cute and worthy to be given as simple tokens of appreciation to people she could suddenly think of. A self-confessed bookworm (though not really anymore this time), it isn’t surprising how she also tried playing with words together using pen and paper. But as a child, it was drawing God-knows-what that she first fell in love with. She’s also amused in capturing life’s moments with whatever kind of camera she has in hand. When she was a little bit older, the popular string instrument that almost anyone knows how to play also became her object of addiction for quite some time (unfortunately, her vocal chords aren’t good enough). School wasn’t really a problem for her, though she believes her life during those days were kind of boring because she was too much of a ‘good student’. She doesn’t really like Math but finds it challenging and good food for her brain, just as solving intriguing puzzles or discovering unbelievable phenomena. She’s been trying too many things, perhaps why she also doesn’t seem to excel on anything. Until now she’s unsure whether she’s more of a left-brain or right-brain kind of person. She loves to eat, she loves to sleep. She’s more of a homebody more than a partygoer, which kind of explains why she’s not really good at socializing. She’s better at writing than speaking. She believes her flaws outweigh her assets (if ever there is). She’s not really an adventurer but recently she’s starting to be. She loves learning, accepts that mistakes are inevitable and some lessons are to be learned the hard way. She’s got theories on her own based on her experiences and beliefs. However, at 21, she also knows she’s still young and juvenile.

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s