マウスを乗せるとこんな感じでお手紙がピョコっと出てきます。

デモはこちらから :
create-a-unique-contact-form-with-css3
ダウンロードはこちらから :create-a-unique-contact-form-with-css3
create-a-unique-contact-form
中を見てみると、transitionを使ってホバーしたときに高さが変わる様に出来てるんですね。φ(゚Д゚ )フムフム…

そして、なんともIEに対応しているのが(・∀・)イイ!!
※ 下のコードがIE対応です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!--[if IE]><script> $(document).ready(function() { $("#form_wrap").addClass('hide'); $("#form_wrap").prepend( '<div id="before"></div>').append( '<div id="after"</div>'); $("#form_wrap").hover(function(){ $(this).stop(true, false).animate({ height : '836px', top : '-200px' }, 2000); $('form').stop(true, false).animate({ height : '580px' }, 2000, function(){ $('#form_wrap input[type=submit]').css({'z-index' : '1', 'opacity' : '1'})} ) }, function() { $('#form_wrap input[type=submit]').stop(true, true).css({ 'opacity' : '0'}) $(this).stop(true, false).animate({ height : '446px', top : '0px' }, 2000); $('form').stop(true, false).animate({ height : '200px'}, 2000) }) }) </div></script>< ![endif]--> |
なんとも可愛いコンタクトフォーム。。でした。