First we need to make the script ans style of the GarageDoor work. To make that happen, you’ll need jQuery. This library enables interface effects, so you don’t have to create it yourself. So grab jQuery and upload it to your server.
Add the following code in the tag of your page:
This will load the scripts and styles needed for the GarageDoor to work. Adjust the paths where needed.
The next thing you want to do is to create the HTML layout for the garagedoors. The following code shows the structure you need to create for your document:
The items have a default size of: 100px width and 80px height. Create overlay images according to these dimensions. In order to change the size, take a look in the garagedoor.css file and adjust the width and height of several elements.
All there is left to do is call the GarageDoor to enable the effect!
GarageDoor.scrollY = -55;
GarageDoor.scrollX = 0;
The first line in the tag sets the amount of scrolling the overlay has to do when the cursor is floating over an item. In this example the overlay has to go 55 up, which means move -55px on the Y-axis.
You can also make it scroll horizontal.
Give the id of the garagedoor container to the setBindings method and the GarageDoor effect will be initialized! Be sure to make the call after creating the html.
Hope you liked this jQuery version of the Garage Door