動くWebデザイン
アイディア帳

動きを実現する仕組み

Modaal というモーダルウィンドウを表示するライブラリを使い、ページにアクセスしたら初回だけ背景が暗くなり動画を表示。

［使用するライブラリ］
＊ jQuery
＊ Modaal（http://humaan.com/modaal/）

HTMLの書き方

1. head終了タグ直前にModaalのCSSと自作のCSSを2つ読み込みます。

   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css">
   <link rel="stylesheet" type="text/css" href="css/9-6-2.css">
   </head>

2. body内のモーダルを表示させたい場所にHTMLを記載します。

   <!--aタグに動画のアドレスを指定します。アドレスの取得方法は後述-->
   <p><a href="https://www.youtube.com/embed/Kq95zgCrxeY" class="video-open">動画を開く</a></p>

3. body 終了タグ直前に jQuery、Modaal、jquery.cookie.js、動きを制御する自作のJS の4 つを読み込みます。

   <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/js/modaal.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
   <!--自作のJS-->
   <script src="js/9-6-2.js"></script>
   </body>

■動画のアドレスの取得方法

・Youtube
「共有」→「 < > 埋め込む」→<iframe> タグ内のsrc=””にかかれているURL
（例）https://www.youtube.com/embed/Kq95zgCrxeY

・Vimeo
「 共有」→「埋め込み」→<iframe> タグ内src=””にかかれているURL 数字終わりまで
（例）https://player.vimeo.com/video/123456789

自作のCSS内の書き方

/*動画表示のモーダルの余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

自作のJS内の書き方

//初回のみモーダルをすぐ出す判定。flagがモーダル表示のstart_open後に代入される
	var access = $.cookie('access')
	if(!access){
		flag = true;
		$.cookie('access', false);
	}else{
		flag = false	
	}
	
	//モーダル表示
	$(".video-open").modaal({
	start_open:flag, // ページロード時に表示するか
	overlay_close:true,//モーダル背景クリック時に閉じるか
	type: 'video',
	background: '#28BFE7', // 背景色
	overlay_opacity:0.8, // 透過具合
	before_open:function(){// モーダルが開く前に行う動作
		$('html').css('overflow-y','hidden');/*縦スクロールバーを出さない*/
	},
	after_close:function(){// モーダルが閉じた後に行う動作
		$('html').css('overflow-y','scroll');/*縦スクロールバーを出す*/
	}
	});