Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
css
 
 
img
 
 
js
 
 
 
 
 
 
 
 

README.md

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

Image showing the title cards

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.

About

CSS Title Sequence in the style of True Detective

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.