入力フォームにフォーカスすると鉛筆でカキカキするアニメーションを表示するアイディア 『Simple focus in/out input animation』

Simple focus in/out input animation
このエントリーをはてなブックマークに追加
PR

Simple focus in/out input animation
By Mirko Zorić

DEMO 表示

focus

inputにフォーカスすることで、入力中であるアニメーションを表示させるアイディアです
フォーカスするとペンが左から現れて、カキカキとアニメーションするのが入力中だというのがわかりやすくて良い

あとは、地味に背景のグラデーションもいい感じです、色使いもイケてます

 

動作はjQueryを使って制御されています

javascript (jQuery)

  // jquery transit is used to handle the animation
   $('input').focusin(function() {
        $('label').transition({x:'80px'},500,'ease').next()
        .transition({x:'5px'},500, 'ease');
//setTimeout needed for Chrome, for some reson there is no animation from left to right, the pen is immediately present. Slight delay to adding the animation class fixes it
         setTimeout(function(){
		    $('label').next().addClass('move-pen');
	      },100);
		
		});
		  
		  $('input').focusout(function() {
          $('label').transition({x:'0px'},500,'ease').next()
           .transition({x:'-100px'},500, 'ease').removeClass('move-pen');
		  });

 

コードをダウンロードする

DOWNLOAD
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)