JavascriptでjQueryプラグイン化☆画像が流れるように動く

更新日 2021年1月30日

Javascriptでウェブの動きをサンプル制作してみました。

 
JavascriptでjQueryプラグイン化☆画像が流れるように動く

これはキャプチャーです。
トップイメージはjQueryのスライダーで、動きは分割しながらフェードします。
これは既存品をサンプルにして、動きは最初に画像・サイズなどを読み込み、
画像の上に分割分だけspanタグを生成し、spanタグに画像をズラして埋め込み、
それを、setIntervalを使用して、順番にopacityを0にしています。

 

今回自作制作なのは、トップイメージの下コンテンツ部分です。

画像へのマウスオーバーで、画像解説がかぶり表示され、画像クリックで、右の空いている欄に、
解説の詳細テキストが表示されます。コンテンツ部分の複数の画像を各クリックするごとに、
画像が左にスライドし、右にその画像の解説が表示され、読み終えた後に元の配置に戻る
動きが美しく、流れがスムーズで洗練されているので、載せるコンテンツまで
素敵に見えてしまう、自作プラグインに仕上がっています。パターンは全部で4つあります。

 

テキスト部分の記入を満たしたら、どこにもないオリジナルの動きを持った
スタイリッシュなプロモーションサイト、ブランディングサイトとして使える
クオリティに仕上がりました。これはチーム開発時の他スタッフの功績によるもので、
提案した企画がすっかり形になりました。

実装したコードです。

外部ファイルは jq_slider.js jq_move.js style_move.css です

CSSの方は動的な部分ではない部分のモノなので無駄にjsの処理を増やさない為にCSSに記述しました
ホバーで表示される部分の色やテキストについてのCSSになります。

htmlのbody内の部分

<div id="ここにid名"></div>

id名は何でも構いませんがスクリプト内に  move_数字  というIDを画像の枚数分生成しているのでこのIDだけは付けることが出来ません。

htmlのscript呼び出し部分

下記はこのプラグインを使うなら入力必須な部分ですID名と画像URLだけでも大丈夫ですが説明文がないなら使う必要がないプラグインになってしまいますので

最後に付けるオプションの最後にはカンマはいりません。下記ではdetail_pの最後の ] の後ろにはカンマは付けていません。他のオプションも追加する場合は , カンマを追加して入力します。

 $(' ID名 ').moveFunc({
 //ここに利用するオプションを記入
  //画像は必須です
  imgURL : ["img/menu_1.jpg",
       "img/menu_2.jpg",
       "img/menu_3.jpg",
       "img/menu_4.jpg"],
  //次は画像にhoverで表示される見出しと簡単な説明部分です
  //上記の画像と同じようにimg_hが見出し部分、img_pが簡単な説明の部分です。
  img_h:["見出し1",
      "見出し2",
 "見出し3",
 "見出し4"],
 img_p:["簡単な説明1",
 "簡単な説明2",
 "簡単な説明3",
 "簡単な説明4"],
 //次は画像が動いた後に出てくる詳細部分です
 detail_p:["1つ目の画像の詳細",
 "2つ目の画像の詳細",
 "3つ目の画像の詳細",
 "4つ目の画像の詳細"]
 });
});

全てのオプションを指定すると

<script>
$(function(){
   $('ここにID名').moveFunc({
      imgURL : ["img/menu_1.jpg","img/menu_2.jpg",
           "img/menu_3.jpg","img/menu_4.jpg"],
      img_h : ["見出し1","見出し2","見出し3","見出し4"],
          img_p : ["簡単説明1","簡単説明2、簡単説明3","簡単説明4"],
          detail_p : ["1つ目の画像の詳細","2つ目の画像の詳細",
             "3つ目の画像の詳細","4つ目の画像の詳細"],
      imgheight : 250,     //画像の表示する高さ 画像のheightの設定ですが画像のwidthを100%として縦横比はオリ             //ジナル画像サイズなので分割数や下記のオプションにあるマージンやスペースの設定によって変わります。
      childrow : 8,   //画像の表示列 ここの指定がない場合はimgURLに指定してある画像の枚数がデフォルトで入ります。
      childcolumn : 1,       //画像の表示行 
      effectTime : 800,      //エフェクトにかける時間
      effectType : 1,        //エフェクトの種類 0:右に消える 1:フェード 2:上に消える
      childSpace : 20,       //画像のスペース
      childMargin_w : 20,    //左右のマージン
      childMargin_h : 30     //上下のマージン
   });
});
</script>

外部Javascriptのコードファイルは下記のようになります。

  (function($){
  $.fn.moveFunc = function(options){
	//初期設定(デフォルト)
	var defaults = {
		imgURL : [],	//画像URL
		hover_h : [],	//画像の見出し
		hover_p : [],	//簡単な内容説明
		detail_p : [],	//詳細内容
		imgheight : 200,			//画像の表示高さ
		childrow : options.imgURL.length,	//画像の列数
		childcolumn : 1,			//画像の行数
		effectTime : 400,	//エフェクトに変える時間 1/1000秒
		effectType : 0,	    //0:右に消える 1:フェード 2:左上に消える
		childSpace : 10,	//子要素の間隔 (単位px)
		childMargin_w : 10,	//左右のマージン (単位px)
		childMargin_h : 10	//上下のマージン (単位px)
		};
		//設定値の書き換え
	var opts = $.extend({},defaults,options);
        	move_imgURL = opts.imgURL;
        	hover_h = opts.hover_h;
        	hover_p = opts.hover_p;
        	click_p = opts.detail_p;
        	move_image_h = opts.imgheight;
        	move_childrow = opts.childrow;
        	move_childcolumn = opts.childcolumn;
        	effect_time = opts.effectTime;
        	effect_type = opts.effectType;
        	move_childSpace = opts.childSpace;
        	move_childMargin_w = opts.childMargin_w;
        	move_childMargin_h = opts.childMargin_h;

		var move_flg = 0;     //画像移動確認フラグ
		var elm;	     //要素格納用
		var $_this = $(this);	//
		var add_html ="";	//HTML生成用
		var elm_num = move_childrow*move_childcolumn;	//生成要素数
		var child_left = [];	//leftの位置
		var child_top = [];	//topの位置
		var child_detail = [];	//詳細内容格納用
		var disp_size = 0;      //ID要素のサイズ取得
		var contents_h = $_this.height(); //コンテンツの高さ
		     contents_w = $_this.width();  //コンテンツの幅
	//指定したIDの要素の高さが未設定または足りない場合に 
     //(画像+マージン×行) の高さを変数に格納
	if(contents_h < move_image_h + move_childMargin_h*2*move_childcolumn ){
	  contents_h = (move_image_h + move_childMargin_h*2)*move_childcolumn
	};

	//ID要素のcssを変更
	$_this.css({
		"position" : "relative",
		"width" : "100%",
		"height" : contents_h + "px",
		"overflow" : "hidden"
	});

	//子要素のサイズを取得
	var child_w =(contents_w-(move_childSpace*(move_childrow-1)+move_childMargin_w*2))/move_childrow; //子要素の幅
	    child_h = move_image_h; //子要素の高さを画像の高さにする

        //テキストが未入力の場合空白にする
        for (var i = 0; i < elm_num; i++) {
                if (move_imgURL[i] == null) {
        		move_imgURL[i] = "";
        	};
        	if (hover_h[i] == null) {
        		hover_h[i] = "";
        	};
        	if (hover_p[i] == null) {
        		hover_p[i] = "";
        	};

        	child_left[i] = move_childMargin_w + ((child_w + move_childSpace)*(i % move_childrow));
        	child_top[i] =  move_childMargin_h + ((child_h +move_childMargin_h)*(parseInt(i / move_childrow)));
        };
		
		//追加の要素とレイアウト設定
		if ($_this.children('div')[0]) {
		} else {
			for (var i = 0; i < elm_num; i++) {
			  if(move_imgURL[i] !== ""){
			    add_html +=('<div id ="move_'+ i +'" class="move" data-img-num="'+ i +
                                 '" data-img-left="'+ child_left[i] +'" data-img-top="'+ child_top[i] +
                                 '"><img class="imgpanel" src="' + move_imgURL[i] + '">');
	 		    add_html +=('<div class="hover_text"><a href=#><h2>'+ hover_h[i] +
                                        '</h2></br><p>' + hover_p[i] +'</p></a></div></div>');
			  };
			};
			add_html +=('<div class="detail_text"><h2></h2></br><p></p></div>');
                    //appendでHTMLの追加をしますが一列ごとにしていると動作処理が重いDOM操作を何度もすることになるの
            //できる限り変数などに格納してまとめて処理をしています。
			$_this.append(add_html);

			elm = $_this.children('.move');
				for(i = 0; i <= elm_num; i++){
					elm.eq(i).css({
						"position" : "absolute",
						"width" : child_w + "px",
						"height" : child_h + "px",
						"left" : child_left[i] + "px",
						"top" : child_top[i] +"px",
						"z-index" : 10
	 				});
	 			};

				if(move_childrow == 1){
				  $('.detail_text').css({
					  "height": (contents_h - move_childMargin_h*2) + "px",
					  "width" : (contents_w - (move_childMargin_w*2)) + "px",
					  "left" : (move_childMargin_w) + "px",
					  "top" : (move_childMargin_h + move_image_h) +"px" 
					});		
		 		}else{
				  $('.detail_text').css({
				    "height": (contents_h - move_childMargin_h*2) + "px",
				    "width" : (contents_w - (move_childMargin_w*2 + child_w)) + "px",
					"left" : (move_childMargin_w + child_w) + "px",
					"top" : move_childMargin_h +"px"
					});
				};
			};
		$('.move').mouseenter(function(){
			$(this).children('.hover_text').stop().animate({
				"top" : "0px",
				"height" : move_image_h + "px",
				"opacity" : "1"
			},300);
		}).mouseleave(function(){
			$(this).children('.hover_text').stop().animate({
				"top" : move_image_h + "px",
				"height" : "0px",
				"opacity" : "0"
			},300);
		});

		$('.hover_text').on('click', function(){
			var _this = $(this);  //$_thisとは別
			var $a = _this.parents().eq(0);
			var $b = $_this.find('.move');
			var $c = _this.parents().eq(1).find('.detail_text');
			var _d = $a.data("imgNum");
			var _e = $a.data("imgTop");
			var _f = $a.data("imgLeft");
			var targetY = $_this.offset().top;

			$c.children('h2').text(hover_h[_d]);
			$c.children('p').text(click_p[_d]);

			switch (effect_type){
			  case 0:
			  	if(move_flg == 0){
			  		slide_right_Func($a,$c);
  					$("html,body").animate({scrollTop:targetY});
			  	}else{
			  		remove_Func($b,$c);
			  	}
				return false;
			    break;
			  case 1:
			  	if(move_flg == 0){
				    fade_Func($a,$c);
	    			$("html,body").animate({scrollTop:targetY});
			  	}else{
				    remove_fade_Func($a,$c,_d)
			  	}
				return false;
			    break;
			  case 2:
			  	if(move_flg == 0){
			  		$a.css({'z-index': '10'});
			  		slide_Zero_Func($a,$c);
					$("html,body").animate({scrollTop:targetY});
			  	}else{
			  		remove_Func($b,$c);
			  	}
				return false;
			    break;
			  case 3:
			  	if(move_flg == 0){
			  		$a.css({'z-index': '10'});
					slide_cube_Func($a,$b,$c);
					$("html,body").animate({scrollTop:targetY});
			  	}else{
			  		remove_Func($b,$c);
			  	}
				return false;

			    break;
			  case 4:

			    break;
			}

		});
		
////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
//左に消える 引数 a=クリックした要素 b=詳細表示要素
		function slide_right_Func(a,b){
			a.siblings().stop().animate({
				'left': contents_w,
				'opacity': '0'
				},effect_time);
			a.stop().animate({
				'left' : move_childMargin_w + "px",
				'top' : move_childMargin_h + "px"
				},effect_time);
			b.stop().animate({
				'opacity':'1'
				},effect_time);
			move_flg = 1;
		}


////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
//左上に集まる 引数 a=クリックした要素 b=詳細表示要素
		function slide_Zero_Func(a,b){
			a.siblings().stop().animate({
				'left' : move_childMargin_w + "px",
				'top' : move_childMargin_h + "px",
				'z-index' : '0',
				'opacity': '0'
				},effect_time);
			a.stop().animate({
				'left' : move_childMargin_w + "px",
				'top' : move_childMargin_h + "px"
				},effect_time*1.5);
			b.stop().animate({
				'opacity':'1'
				},effect_time);
			move_flg = 1;
		}


////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
// 引数 a=クリックした要素 b=詳細表示要素
		function slide_cube_Func(a,b){
			a.siblings().stop().animate({
				'left' : move_childMargin_w + "px",
				'top' : move_childMargin_h + "px",
				'z-index' : '0',
				'opacity': '0'
				},effect_time);
			a.stop().animate({
				'left' : move_childMargin_w + "px",
				'top' : move_childMargin_h + "px"
				},effect_time*1.5);
			b.stop().animate({
				'opacity':'1'
				},effect_time);
			move_flg = 1;
		}


////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
//元の位置に戻す  引数 a=元の位置に戻す要素 b=詳細表示要素
		function remove_Func(a,b){
			for (var i = 0; i < elm_num; i++) {
				var _a = a.eq(i)
				_a.stop().animate({
				"left" : child_left[i] + "px",
				"top" : child_top[i] + "px",
				'z-index' : '5',
				"opacity" : "1"
				},effect_time);
			}
			b.stop().animate({
				'z-index' : '0',
				'opacity':'0'
				},effect_time/2);
			move_flg = 0;
		}

////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
//フェードアウト  引数 a=元の位置に戻す要素 b=詳細表示要素
		function fade_Func(a,b){
			a.siblings().stop().animate({
				'opacity': '0'
				},effect_time);
			a.stop().animate({
				'left' : move_childMargin_w + "px",
				'top' : move_childMargin_h + "px"
				},effect_time);
			b.stop().animate({
				'z-index': '10',
				'opacity':'1'
				},effect_time);
			move_flg = 1;
		}

////////////////////////////////////////////////////////////////////////////
//フェード効果を元に戻す  引数 a=元の位置に戻す要素 b=詳細表示要素 c=クリックした要素のimgNum(データで格納してある)
		function remove_fade_Func(a,b,c){
			a.siblings().stop().animate({
				'opacity': '1',
				'z-index': '5'
				},effect_time/2);
			a.stop().animate({
				'left' : child_left[c] + "px",
				'top' : child_top[c] + "px",
				'z-index': '5'
				},effect_time);
			b.stop().animate({
				'z-index': '0',
				'opacity':'0'
				},effect_time/2);
			move_flg = 0;
		}



////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////

	};
})(jQuery);

 

ピックアップ記事

  1. GAFAMAからの脱出(1)その心模様
    ビッグテックともよばれているGAFAM(Google,Amazon,Facebook…
  2. 混在コンテンツmixed contentsを改良する方法
    混在コンテンツとは、どういう意味ですか?混在コンテンツ(Mixed contents)とは、一つ…
  3. 目次 前準備のバックアップと注意点 英語の説明を翻訳してよく読み理解する ステップごと…
  4. 目次 Webデザイナーが初めて知る「MariaDB」という名前 MariaDBって何ですか…
  5. 目次Web Design 3.0への流れWeb Design 2.0とWeb Design 3…
PAGE TOP