Parallax scrolling? Just shoot me.

So we came up with this brilliant idea for this totally awesome little shop’s site we’re building. It’s a tiny little thing, barely 4 pages, but it’s really about the brand. They’re this tiny shop here in Chicago, and they have the most eclectic products, and the more time you spend in the store the more stuff you see. Conceptually, we wanted to represent that feeling in the site. We thought parallax would be a great way to let users explore the site like they explore the store. I just didn’t think it’d be so hard to build.

I’ve been reading every tutorial on the internet about how this really neat effect is achieved. Turns out there’s really not just one way to do it. People have come up with all sorts of ways. The problem is, they’re sort of hard to follow, and despite my best efforts the closest I’ve gotten is a moving background… and it moves faster than the foreground, which is exactly the opposite of the effect we’re going for here.

That said, I’m a very determined person. I can’t back away from a problem (though I have been known to procrastinate when I’m feeling…overwhelmed), so I’ll figure it out eventually. When that happens, expect to see a very thorough, totally nerdy, easy to follow tutorial.

If there’s one thing I can’t stand, it’s another tutorial that I can’t seem to follow.

2 Comments

  1. I agree completely. The parallax tutorials out there just blow the top of my head off, but I too am determined to implement it. I’m going to dedicate the coming week to slaying this dragon, and, if I survive, I’ll report back!

  2. kristi-lynn (Author)

    I’m so glad to hear I’m not the only one suffering! The good news is I did manage to get it working and we’re planning to launch either this week or next.. be on the lookout for an update post next week (probably).. maybe it will help! Come back when your site is done too and share the link! I’d love to check it out!

    Oh, and the only hint I’ve got at this point is the background needs to be position:fixed… solved a LOT of shenanigans!