CSS True Titles
A title sequence made with CSS in the style of the True Detective opening.
http://lab.tylergaw.com/css-true-titles/
I wrote an article talking in more detail about the masking and animations. It lives
here: http://tylergaw.com/articles/css-true-titles
Problems
- CSS
mask
support is currently limited to blink/webkit. I'm only seeing it
work on Chrome (v32.x) and Mobile Safari (whatever version is on iOS 7.x)
http://caniuse.com/css-masks
- High Res/Retina displays hate this demo. I think it's just too much moving
around. Those big raster images and masks flake out from time to time.
- File size. I'm using a number of large images with transparency so the page
weight is about 4.3 MB. Ouch.
- Crashes Mobile Safari and Chrome for iOS pretty consistently.
Reference
What did I learn?
- Strange rendering issues occur when attempting heavy lifting on Retina displays
-
background-size: cover
Is very helpful for keeping images from becoming too
small, however using it is also tricky. It's much harder to have things appear
exactely how you want. You kind of have to let go and allow the browser to do
what it wants.
- When moving things with CSS always use
translate
in place of updating
left/right/top/bottom position or background-position
. Paul said it
here
On this demo I saw it first hand. When not using translate
animations were
choppy and CPU usage was through the roof.