Some features for the site...

This week our team has taken a trip to some of the websites available out there, which we think do have some quite interesting features that are simple enough to add to Vinamation website but still create good impression on the visitors.

We would like to employ this style found in Outspark website: http://www.outspark.com/fiesta. If you hit "Login", there will be a small panel popping up allowing you to enter your information, meanwhile, the other parts of the site are "faded" into the background (which means their opacity is decreased).

Now how would we do that? Easily with javascript and the aid of CSS. We'd simply create 2 more divs on the site, one for the panel, the other for covering the entire screen. Let' call the first one "panel" and the other "fader":

<.div id="panel"><./div>
<.div id="fader"><./div>

Now we'll create a javascript function that can alter the opacity and the display properties of those 2 divs:

<.script style="text/javascript">
function fade() {
document.getElementById('fader').style.filter="alpha(opacity=70)";
//OTHER CODE TO ADD MORE EFFECTS AND TO MANAGE THE APPEARANCE OF THE 'panel' DIV
}
<./script>

The purpose of this script is to make the 'fader' div (which covers the entire screen) appear, but only with an opacity of 70 or so, that would give the effect of everything fading out; at the same time the 'panel' div would be made visible (display = "block"). On this panel we can add anything we want (links, images, textboxes, etc.)

Then we can incorporate this function to a link on the site to make it work.