制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングjavascript画像に付けたボーダーをアニメーション化する『InsetBorder』の動作を逆にする[javascript]

画像に付けたボーダーをアニメーション化する『InsetBorder』の動作を逆にする[javascript]

2013年12月04日javascript 
画像に付けたボーダーをアニメーション化する『InsetBorder』の動作を逆にする[javascript]記事のアイキャッチ画像

画像に付けたボーダーをマウスオーバーでアニメーションで消してくれる『InsetBorder』というjqueryプラグインですが、動作逆の方がよくない!?ってことで画像にマウスオーバーしたらアニメーションでボーダーが表示されるようにカスタマイズ。

まえがき

『InsetBorder』というjqueryプラグインは画像に付けたボーダーをマウスオーバー時にアニメーションで消してくれるというものです。
言葉じゃ伝わりません。公式サイトのデモをご覧下さい。

だんだんボーダーを消してくれるのですが、これ逆の方がよくないですか?
画像をマウスオーバーしたらボーダーがだんだん表示されるって動きのほうがよくないですか??
いいですよね!

『InsetBorder』を誰かがカスタマイズしたっぽいのを見つけたのでちょっといじって公開します。

解説とかいらないからデモ見せろって人は下からどうぞ!

デモ

公式サイトのデモの流用でごめんなさい笑

『InsetBorder』のjquery.insetBorderEffect.jsを変更する

『InsetBorder』の使用方法は公式サイトを参照してください。
「jquery.insetBorderEffect.js」というファイルをHTMLに読み込みますが、そのコードを下記に変更します。

/*
	Author: Robin Thrift
	You are free to use this plug in in any way you want non-commercially and commercially. 
	However if you redistribute (even when altered by you) you have to give credit to me. 
	How you give me credit is up to you. Here are two links you could link off to:

http://www.twitter.com/r0bs3n


http://rob-thrift.com

	And now have FUN!
	
	Alerations by: Chris Coyier
*/

// allows for use of $ without conflict worries
(function($) {
	
	$.fn.insetBorder = function(options) {
		
		if ((options!=undefined) && (options.inset!=undefined))
		{
			if (options.plusnum==undefined) { options.plusnum = options.inset; }
			if (options.plusnum==undefined) { options.plusnum = options.inset; }
			if (options.plusnum==undefined) { options.plusnum = options.inset; }
			if (options.plusnum==undefined) { options.plusnum = options.inset; }
		}
		// defaults
		options = $.extend({
			speed : 250,
			plusnum : 7,
			zero : 0,
			borderType: "solid"
		}, options);
		
		// run plugin on entire jQuery set
		return this.each(function(i) {
				
      var			
  			$el = $(this),
  			ibe_height = $el.outerHeight(),
			  ibe_width = $el.outerWidth();
			
  		var
			  wrapper = $("<div />", {
  			  "class": options.outerClass,
  			  "css"  : {
    				"width": ibe_width,
    				"height": ibe_height,
    				"overflow": "hidden",
    				"float": "left",
    				"top": 0,
    				"left": 0,
    				"position": "relative"
  				},
    		  "mouseenter": function() {
    				  $el
    					 .next()
    					 .animate({
    					   "top": options.zero + "px", 
    					   "left": options.zero + "px", 
    					   "height": ibe_height - options.plusnum*2 +"px",
    					   "width": ibe_width - options.plusnum*2 +"px",
    					   "opacity": 1
    					 }, {
    					   "duration": options.speed, 
    					   "queue": false,
    					   "complete": function() {
    					   
    					     // BUG: for some reason this is getting called twice.
    					     
    					     // Kinda works... attempt at allowing selectability of main element
    					     // The problem is this only fires on complete but must make visibile on mouseleave no matter what
    					     // $el.next().css("visibility", "hidden");
    					     
    					   }
    					 });
  					 
  				  // on mouseleave
  					},
  					"mouseleave": function() {
  					  
  					  $el
  					     .next()
  					     // .css({
  					     //  "visibility": "visible"
  					     // })
  						   .animate({
  						     "top": "-" + options.plusnum*2 +"px", 
  						     "left": "-" + options.plusnum*2 +"px", 
  						     "height": (ibe_height + (options.plusnum + options.plusnum)) + "px", 
  						     "width": (ibe_width + (options.plusnum + options.plusnum)) + "px", 
  						     "opacity": 0
  						   }, {
  						    "duration": options.speed, 
  						    "queue": false
  						  });
  						  
  					} 
  				}),
			   
			   
			 after = $("<div />", {
  			  "class": options.innerClass,
  			  "css"  : {
    				"height": (ibe_height + (options.plusnum)) + "px",
    				"width": (ibe_width + (options.plusnum)) + "px",
    				"border-left": options.plusnum + "px " + options.borderType,
    				"border-right": options.plusnum + "px " + options.borderType,
    				"border-top": options.plusnum + "px " + options.borderType,
    				"border-bottom": options.plusnum + "px " + options.borderType,
    				"position": "absolute",
    				"top": "-" + (options.plusnum*1.5) + "px",
    				"left": "-" + (options.plusnum*1.5) + "px"
			    }
			   });

				$el.wrap(wrapper).after(after);
			 
			});
				
	};
	
})(jQuery);

「plusnum」にボーダーの大きさを設定して基準としています。
ボーダーの大きさとアニメーションのスピードは31,32行目で変更できます。

			speed : 250,
			plusnum : 7,

ボーダーの色はjsではなくcssで変更します。
ボーダーを表示する画像の親要素(親要素なら何階層上でもいい)に「color」を指定します。
KoToRiのデモを例に挙げます。

          <ul>
            <li style="color:#ff9900;"></li>
            <li><img class="hover_img_default" src="img/stockpic2.jpg" alt="text" /></li>
            <li><img class="hover_img_default" src="img/stockpic3.jpg" alt="text" /></li>
          </ul>

これで一番上の「stockpic1.jpg」のボーダーの色は「#ff9900」になります。
この例はインラインスタイルで指定してありますが、もちろん外部のcssに記述してOKです。
てかそうしてください笑

まとめ

よく分からなかったり正常に動かない人はKoToRiのデモをご覧下さい。

このプラグインは地味に愛用してます。
画像マウスオーバー時にちょっとこういう動きが入るだけでもサイトの印象が変わってきますよね。
こういう細かい気遣いが大事なのですよね。
これからも細かい気遣いを大切にめんどくさがらずにあくなき探究心でWebに情熱を注いでいきたいものです。

『InsetBorder』や『逆InsetBorder(勝手に命名)』使用したことない人は次の機会に検討してみてください。

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント