Departments
Departments
Departments
SUBSCRIBE TO NEWSCONTACT US
As you may know if you follow the RustyBrick blog, we've introduced company profile pages for each employee. These pages allow us to write a little about ourselves and explain some of the work we do at RustyBrick. I was looking to add some "flair" to my profile to make it stand out amongst the other profiles, but wasn't sure what add. Luckily, Ronnie gave me a great idea. My current profile picture was a really nice hand-drawn caricature illustrated by Becca Klein. Ronnie suggested that since it kind of looks oversized like a bobblehead, I should turn it into an actual bobblehead. While it sounds like a simple request, I decided to take it one step further and actually make the head "bobble" when you hover over it!
The custom CMS (Content Management System) we use for our RustyBrick site is tailor-made to allow for users with no coding skills whatsoever to make great looking content. However, these same features can cripple creativity because we have no control over the profile page template itself, just the text content within it. Sure, I could have simply asked Ronnie to alter the template and allow for me to easily add in the bobblehead code for my profile, where's the fun in that? I needed to find a way to change the profile page without actually changing the code that 'creates' it and some quick jQuery allowed me to do just that.
The first thing I needed to do is include the jQuery library. I simply added in the tag and hotlinked it from the Google Code Library. However, since the RustyBrick website uses a different Javascript framework called Prototype, I needed to add in the code enabling the setting of noConflict. Next, I created a new jQuery function to execute on page load. Finally, three simple lines of code within the function power the bobblehead effect.
The first line looks for the first image in the status div, which in this case is our original company profile picture. It then immediately hides it. Then line 2, adds some HTML code within the status div to input a bobblehead body image as well as a replacement head. (I photoshopped the bobblehead body from this Big Lebowski bobblehead and the original profile photo head is replaced to a transparent version to allow for it to 'sit on top' of the body.) Finally in line 3, two mouseevents are bound to the new replacement head. When you mouseover the replacement head, the source of the image changes which changes the photo to an animated GIF version of the head which "bobbles". Then, as you mouseout of the image, the source reverts back to the replacement head.
I found this method to be the easiest way to perform the bobblehead effect. With a little bit more jQuery magic, you could likely use jQuery itself to create the actual bobble movement. Instead of replacing the head with an animated GIF, you could try executing a function with uses the jQuery animate feature to bounce the head around. Try experimenting and see what you can come up with!
Alex worked on several successful e-commerce websites before joining the RB team. He graduated from SUNY Purchase with a Bachelor's in Math & Computer Science.
This article is under Geek Factor, Creative
There is 1 comment for this post
250 West Nyack Road, Suite #200 West Nyack, NY 10994
Get Directions
877-GO-RUSTY
877-467-8789
845-369-6869
845-228-8177
1 COMMENT