October 25, 2012

Pod Bay Doors

So I spent about an hour on the front page of Hacker News last night and here’s why: it was a terribly slow night. Laughs all around, but I’m serious. Tangentially related to it being a slow night on HN, I made a super simple little jQuery thing that mimics sliding doors opening up. Being a sci-fi geek, I naturally called it Pod Bay Doors. I guess a few people enjoyed it and it got enough votes quickly enough to push it up to #22.

Behind the scenes there is not too much going on there. The main components are three div elements, two of which are nested inside the third. The container div has a relative position, while the two nested components are absolutely positioned. Just some widths, floating, and overflow:hidden is all that’s really needed to handle the appearance of everything.

The animations are all jQuery and were simple enough to set up, even with my limited programming knowledge. The Javascript consists of two functions - one to open the pod bay doors and another to close them. They both rely on grabbing the nested divs out of the DOM and using jQuery’s .animate() to move them around. The button is set up to toggle, so I didn’t have to worry about handling the binding and unbinding of click events. Simple and effective. I was unhappy with jQuery’s sole ease type, “swing”, so I included the always excellent jQuery Easing plugin to provide for more easing options.

Eventually, I may make it a proper jQuery plugin, but would prefer to get more comfortable with programming and jQuery before doing that. I would love to allow for passing of options like speed and easing, but right now I am just happy to have a fun, working prototype of the effect. Check it out on Github and and view the demo here. Enjoy!