CSS Diagonal Scrolling Background

July 10, 2016

Japanese mobile games have started to become a thing for me. With recent hits like Neko Atsume, Tap Katamari and now Pokemon Go quickly becoming go-to apps on my phone, I’ve started to notice patterns/trends in these user interfaces. One that many of these games seem to have is a diagonally scrolling  background.

So I decided to give it a whirl in CSS to see if I could accomplish something similar. As it turns out, it’s not too hard to do!

See the Pen CSS Diagonal Scrolling Background by Alan Vitek (@alanvitek) on CodePen.

Thanks to Best PSD Freebies for the pattern example.