Yet Another Parallax Effect, but This One Wastes Fewer Pixels and Bytes.

Everyone loves the parallax effect, and I’ve been swiping snippets of code to do it for a long time, but never really thinking about it too much. You load it, set some parameters, and that’s it. I was having a little glitch with one, and was tweaking it, and I started to wonder why the effect didn’t just start at one end of my image, and end at the other end.

After all, if I don’t show all the pixels, I’ve “wasted” all those network bytes to load the data, and all the memory to hold the data.

This parallax effect is stingy with network bytes.
Continue reading Yet Another Parallax Effect, but This One Wastes Fewer Pixels and Bytes.

Responsive Design + Mobile First = Automated Layouts

I’m shocked at how many businesses still have websites that don’t work in mobile. For the average person, reading web pages on a smartphone is the primary way they read content on the web.

Though I’m not 100% on board with “mobile first”, it should soon be the norm. To CSS hackers, “mobile first” just means implementing the mobile layout first, then making the wider-screen layout the exception.
Continue reading Responsive Design + Mobile First = Automated Layouts

CSS Animations using Transitions with Conditional CSS, Stacked Rectangles

This is a somewhat elaborate example of how to use conditional CSS and transitions to create a fluid, responsive stack of rectangles that are polite enough to stack up when the screen is narrow. The idea is I’m working on is to have a menuing system that stacks when the screen shrinks.
Continue reading CSS Animations using Transitions with Conditional CSS, Stacked Rectangles