Lilt.js

I was working on my portfolio site last week and playing with the parallax effect when I had the idea of making a CSS shadow that moved as you scrolled to create the illusion of depth and a single source of light (imagine holding the light in front of your monitor and casting a shadow on your divs). Had this effect ever been made into a script? To my surprise, there were very few scripts out there that did this. So I decided to try it on Codepen. It only took me about half an hour to do. I went through several other variations since then, but the basic idea is the same.

The next morning, I couldn't stop thinking about how awesome it would be if I could make it into a plugin. It could be my very first contribution to open source that people would actually use (because let's not kid ourselves, nobody's actually going to use my todo app! haha).

So I started reading about JQuery plugins to see what I'd have to do to my code to make it into a pluggable part that people can just include. I also wanted it to be easily customizable. People can just use data-attributes on their div tags to change the properties of the shadow, how much it blurred, how fast it moved, etc. I definitely didn't want them to have to change my script in order to change the options. It should be like a function, you pass it arguments, and it did its thing.

Making my half hour script into a flexible plugin turned out to take me much longer than writing the basic script itself. But it was a great exercise in writing modifiable code! I had to think a lot about encapsulation and keeping variables inside the plugin separate from everything external. Finally, I had to create a pretty page to show off the capabilities of my plugin. Go visit it now! And let me know if you find it useful.

Future improvements (maybe):

• text shadows!
• maybe the blur value can change as you scroll as well?