Garagedoor effect using Javascript
You might have noticed the menu at the top right corner of the website. That’s something what I like to call the GarageDoor effect.
Creating one has now been made easy! This tutorial explains everything you need to know on how to create the same effect yourself.
Download
Garage Door Effect zip-archive
Example
Open the Garage Door example
An example of the GarageDoor effect in work is found here: http://www.gayadesign.com/scripts/garagedoor/
Download the following archive containing everything you need: http://www.gayadesign.com/scripts/garagedoor/garagedoor.zip
Unzip the contents of the archive and upload the contents to your server, the set folders can be adjusted to your needs.
First we need to make the script ans style of the GarageDoor work. To make that happen, you’ll need Scriptaculous. This library enables interface effects, so you don’t have to create it yourself. So grab Scriptaculous and upload it to your server. Make sure you also upload the prototype.js file (in the lib folder).
Add the following code in the <head> tag of your page:
<script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js" type="text/javascript"></script> <script src="js/garagedoor.js" type="text/javascript"></script> <link href='css/garagedoor.css' rel='stylesheet' type='text/css' />
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:
<div class='garagedoor' id='garagedoor'>
<div title='linktofile' class='item'>
<div class='underlay'>
Caption text
</div>
<img src='uritooverlayimage' class='overlay' />
<div class='mouse'><img src='images/nothing.gif' /> </div>
</div>
<div title='linktofile' class='item'>
<div class='underlay'>
Caption text
</div>
<img src='uritooverlayimage' class='overlay' />
<div class='mouse'><img src='images/nothing.gif' /> </div>
</div>
</div>
This contains two items that will be the garagedoor. The keywords linktofile and uritooverlayimage have to be adjusted in order to make it work. Linktofile is the URL of the page the button has to link to, might be confusing because it’s not an a tag, but Javascript fixes it for you.
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!
<script>
GarageDoor.scrollY = -55;
GarageDoor.scrollX = 0;
GarageDoor.setBindings('garagedoor');
</script>
The first line in the <script> 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.
You are now set to use the GarageDoor Effect. Good luck!
Articles like this one
12 Comments
-
Yeah that’s our door!
-
It sure is =D
-
Tried this but it only seems to work with the nothing.gif you’ve included in your download. Even editting the nothing.gif breaks it..
-
Yeah, the nothing.gif is a fix for IE6. If it would have worked like in Mozilla, then there wouldn’t be such an ungly fix.
-
So how to make it work with your own icons then?
-
uritooverlayimage need to be replaced with yours =) (eg. /images/icons/icon1.png)
-
Never mind, I was being stupid.. the SRC replacing with your own..
Anyway, looks great! And love your new design
-
Cool thnx =D have fun!
-
Hey Gaya, is it possible to make this W3C XHTML valid?
-
Was thinking about that too, will make it valid later. Seems block elements aren’t supposed to be in link tags. Will fix, will fix
-
K, thanks, could you send me an email when you’ve done so?
-
This script is now xhtml valid
Recent comments