Animated illustrations that use [@patrykzabielski](https://twitter.com/PatrykZabielski)'s script, and [Jun Luo](https://jluodesign.com/)'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.

Parallax Animated Illustrations


## Working examples

### Same-Sex Marriage
![Same Sex Marriage](/content/images/posts/animated-illustrations.jpg)
[View Article](http://pets.cballenar.me/animated-illustration/same-sex-marriage/)

### Politics
![Politics](/content/images/posts/animated-illustrations-2.jpg)
[View Article](http://pets.cballenar.me/animated-illustration/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:

```css
.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](https://medium.com/@PatrykZabielski/how-to-make-multi-layered-parallax-illustration-with-css-javascript-2b56883c3f27#b5f6), 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#aspect-ratio) 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.

## Credits
- [Multi-layered Parallax Illustration by Patryk Zabielski](https://medium.com/@PatrykZabielski/how-to-make-multi-layered-parallax-illustration-with-css-javascript-2b56883c3f27)
- [Illustrations by Jun Luo](http://jluodesign.com/)
- [Same Sex Marriage Article by NPR](http://www.npr.org/sections/thetwo-way/2015/06/26/417717613/supreme-court-rules-all-states-must-allow-same-sex-marriages)
- [Politics article by UNDiario](https://undiario.pe/2015/01/21/3-consejos-para-nuevos-gobernantes)

A python script to help you back up your SlideShare presentations to PDF.

SlideGrubber


![Screenshot of SlideGrubber Application](/content/images/posts/slidegrubber.jpg)

[SlideGrubber](http://grub.cballenar.me/) is a very simple application that can easily grab presentations from the popular website [SlideShare](http://www.slideshare.net/) and turn them into PDFs for a quick and easy backup of your presentations.

## Update: April 26, 2016

The script behind SlideGrubber has been updated and cleaned up. All the noise about how to install a full version of SlideGrubber has been stripped out and only the python script has been left behind. Anyone that would like to run this locally can now do it within minutes.

## Source Links

- [View Site](http://grub.cballenar.me/)
- [View Source Code](https://github.com/cballenar/slideshare-to-pdf)
- [Download](https://github.com/cballenar/slideshare-to-pdf/archive/1.0.zip)


A PX to EM calculator for the non-mathie CSS writer.

Emzy


![Screenshot of Emzy App](/content/images/posts/emzy.jpg)

Emzy is a PX to EM calculator that allows you to keep track of multiple elements and output the final results as CSS.

I worked on Emzy a few years back and, much like [DaGrid](/posts/2015/dagrid/), I never bothered to publish it. But here it is!

I saw this project done at [EMCalc](http://riddle.pl/emcalc) and decided to make my own version. Unfortunately, EMCalc doesn't seem to be available anymore.

## Source Links

- [View Site](http://cballenar.github.io/emzy/)
- [View Source Code](https://github.com/cballenar/emzy)
- [Download](https://github.com/cballenar/emzy/archive/master.zip)


An experiment with animated css text-shadow through javascript.

Be a Badass


Be a Badass uses javascript to change the text shadow based on the position of the cursor on the screen relative to the center of the object. Thus creating a spotlight like effect. It also gave me a chance to play with typography and colors.

You can find a simplified version of the code below and by following the [Source Code Link](http://jsbin.com/bejaveda/3/edit) and here, the [Final Version](http://pets.cballenar.me/be-a-badass/).

## Notes

### CSS3 `box-shadow` vs. `text-shadow`

While at first sight these may seem like the same property applied to different elements, they take different arguments. Unlike box shadow, text shadow does not take a value for `spread`, which would make the shadow larger. In this case having the ability to increase the spread value gives the circle in the demo a more realistic look.

### Math

Who says that the good ol' math days were useless? Albeit, not very complex, I had a chance to use the Pythagorean theorem in order to calculate the distance from the center of the target to the cursor.

### Other Goodies

- The text is sized using the viewport width (`vw`) measurement. [Read more about it](http://css-tricks.com/viewport-sized-typography/).
- Font used is [Zalamander by Just Another Foundry](http://justanotherfoundry.com/zalamander).
- Touch support. It currently detects tap position on mobile devices but maybe it could detect the orientation? That'd be cool.

## Source Links
- [View Site](http://pets.cballenar.me/be-a-badass/)
- [View Source Code](http://jsbin.com/bejaveda/3/edit)

Carlos Ballena

Pet Posts

Parallax Animated Illustrations

SlideGrubber

Emzy

Be a Badass