What is Tinseltown.js?
Tinseltown.js is a small library to help design UI with flashy loading effects like the ones we see in media, from low-budget hacker movies to futuristic sci-fi blockbusters... Stuff you would find on /r/itsaunixsystem.
"Tinseltown"...?
Tinseltown is a nickname for Hollywood, where we get some of our cheesiest hacker movies and TV shows from. Tinsel (the decorative material) also happens to be shiny and glittery, sort of like the effects included in Tinseltown.js. :D
So, how does this work?
Tinseltown.js consists of two tiny files.
- A JS file, which assigns random (or not, if you prefer) animations, assigns random animation start times, and provides several utility functions for more control.
- A CSS file, containing a few CSS-based (efficient!) animations, and a class-based API system used by Tinseltown.js. Choose from
tnsl-flicker
,tnsl-flickerQuick
,tnsl-slideFromLeft
,tnsl-slideFromRight
ortnsl-random
(see documentation for more info).
The CSS file contains animations which would otherwise look meh. But Tinseltown.js uses Math.random
to put some life into them. By offsetting start times of the animations, web pages look like something straight out of The Matrix.