Forums
This topic is locked
dmx zone designs fly out
Posted 24 Sep 2011 16:34:56
1
has voted
24 Sep 2011 16:34:56 phil vouers posted:
How do you do that neat flyout that you have added to your site. Replies
Replied 26 Sep 2011 13:33:20
26 Sep 2011 13:33:20 Patrick Woldberg replied:
It is a div positioned with css and animated with jquery.
some css like:
then some javascript:
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.
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.