Parallax Animated Illustrations
Animated illustrations that use @patrykzabielski's script, and Jun Luo's digital paintings. Patryk's parallax script is an elegant piece of code that use a data value to animate layered images parallaxically (?). With a few tweaks to the styles, I've added greater control to the ratio of the image, that way we're not limited by a fixed height.
Working examples
Same-Sex Marriage
Politics
Highlights
I will not go into how to use Patryk's script, as he has already done a great tutorial on that. But I would like to highlight a few things:
Simple
The compiled javascript is only 18 lines of code (16 in CoffeeScript).
Easy and Intuitive
The script uses a data-depth attribute on each layer to calculate how fast and in what direction each layer should move. One can use positive numbers to make the layer go up, and negative to make them move down. For subtle effects, something between -1 and 1 should be enough. Anything greater also runs the risk of getting cropped.
Controlling the Aspect Ratio
One thing I wish I'd had, was more control over the aspect ratio of the image. However I was able to achieve this easily by using padding-bottom instead of height to set the size. This way we can use a percentage, based on the width of the image, instead of a fixed number of pixels. For example:
.ratio-16-9 {
height: 0;
padding-bottom: 56.25%;
}
.ratio-4-3 {
height: 0;
padding-bottom: 75%;
}
.ratio-1-1 {
height: 0;
padding-bottom: 100%;
}
These classes will use the width of the element as a reference to calculate the faux height of it. It's worth noting that I also added media queries to change the size of the images based on the screen size. Making it smaller on larger screens to avoid cropping.
Sorry About Your Bandwith...
Unlike good considerate Patryk, I just had to know what this would look like in mobile regardless of performance or the user's bandwith. And even though it almost killed my phone, I have no regrets... Once I had control over the aspect ratio, I had to enable it using aspect ratio media queries to figure out when to change between a 1:1 ratio (for portrait) or 16:9 (for landscape).
Cropping
Ahhh... Sadly this method runs into a cropping issue. However this can be bypassed by playing with the background size and its container.