Cool front page

There is a site on internet  We Are Empire. This site has pretty cool front page. Page is pretty descriptive too plus it don’t irritate the user by reloading for new content. Some other site like this which I personally liked is Nike‘s nike better world site. It takes a little while to load but every information is on just one single page and designed in awesome way using HTML5, z-index and many more things. We will come to it some other time.

But we will talk about the former one here. After running a console over the site, I understood what they had done. Well its nothing but Javascript and applaud to the maker, it is used very well for designing. It do not have flash.

  1. What they had done is when you click on the front logo which is image it shows you next div which is hidden behind it and hide the top div.
  2. Now you see 4 bubbles. Thats interesting now margin of the image in background of the bubble changes when you hover it while hiding the overflow. This is a good thing, must have taken long time to do that.
  3. Open at the bottom is the coolest thing. Click on it and another page comes with no page loading. Again is the game of margin. Margin-top is changed using Javascript to animate.
  4. There are smaller effects also like close appearing and hiding, get in touch etc.

So, this is how this front page is working. Try making yours with such innovation.

Here is a example of that a very short one.

<script type="text/javascript">
function anim(mydiv)
{
   var i = 0;
   while(i < 10)
  {
     mydiv.style.marginTop = 10*i + 'px';
     i++;
  }
}
</script>
<div id="mydiv" onclick="javascript:anim(this)">
    test
</div>

There is no need to explain the code above. Its self explanatory and use basics of Javascript and HTML.