とっても可愛らしいコンタクトフォームがありま
したのでメモがてらご紹介します。封筒に入
った手紙を模したフォームのデザインで、
マウスを乗せると、フォーム部分の手紙が
アニメーションしながら出てきます。使いど
ころは今は限られてしまいそうですが・・
将来は普通に使えるといいですねw
なかなか素敵なフォームデザインです。手紙にマウスを乗せるとゆっくりフォームが出てきますよ。こういう発想力がほしいですね・・
a unique contact form with css3 transitions
お手紙が入った封筒です。チラッとフォームが見えてますね。
マウスを乗せると・・
ゆったりとしたアニメーションでするすると出てきます。かわええw
こんな仕組みらしいです。アニメーションはtransitionで、ホバー時に高さを変えてるんですね。
form { background : #f7f2ec url ( 'images/letter_bg.png' ); position : relative ; top : 200px ; overflow : hidden ; height : 200px ; width : 400px ; margin : 0px auto ; padding : 20px ; border : 1px solid #fff ; border-radius : 3px ; -moz- border-radius : 3px ; -webkit- border-radius : 3px ; box-shadow : 0px 0px 3px #9d9d9d , inset 0px 0px 27px #fff ; -moz- box-shadow : 0px 0px 3px #9d9d9d , inset 0px 0px 14px #fff ; -webkit- box-shadow : 0px 0px 3px #9d9d9d , inset 0px 0px 27px #fff ; -webkit- transition : all 1 s ease-in-out . 3 s; -moz- transition : all 1 s ease-in-out . 3 s; -o- transition : all 1 s ease-in-out . 3 s; transition : all 1 s ease-in-out . 3 s;} #form_wrap:hover form { height : 530px ;} |
ほかにもいろいろと工夫が見られます。
IEにも対応させる
IEにはjQueryで対応させてるみたいです。
<!--[ 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) }) }) </script><![endif]--> |
デモもあるのでぜひご覧くださいませ。