Forums

This topic is locked

dmx zone designs fly out

Posted 13 years ago
1
has voted
13 years ago phil vouers posted:
How do you do that neat flyout that you have added to your site.

Replies

Replied 13 years ago
13 years ago Patrick Woldberg replied:
It is a div positioned with css and animated with jquery.

some css like:
div.flyout {
  position: fixed;
  background: #f00; /* place some image or so */
  width: 500px;
  height: 500px;
  right: -480px; /* place outside screen, only 20px visible */
  top: 50%;
  margin-top: -250px;
}


then some javascript:
$('div.flyout').hover(function(e){
  $(this).animate('right', 0);
}, function(e){
  $(this).animate('right', -480);
});


That would be the basics, you should have of course a div with a class flyout on the page, you can add more to the flyout like a banner or so, also you can play with the css and animation.

Reply to this topic