JS | イセンチュートリアルサイト

カテゴリーページ

スクロールすると画面分割した右側が動く

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/6-4.css">

body内にHTMLを記載します。

<div id="wrapper">
	<div id="fixed-area"></div><!--左固定エリア-->
	<div id="container"></div><!--右エリア-->
<!--/wrapper--></div>

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

<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/stickyfill/2.1.0/stickyfill.min.js"></script>
<!--自作のJS-->
<script src="js/6-4.js"></script>

CSSの書き方

/*左と右を囲う全体のエリア*/
#wrapper{
	position: relative;/*position stickyの基点にするため relativeをかける*/
	display: flex;/*左エリア、右エリア横並び指定*/
	flex-wrap: wrap;/*ボックスの折り返し可*/
}

/*左エリア*/
#fixed-area{
	/*左固定記述*/
	position: -webkit-sticky;/*Safari用*/
	position: sticky;
	top:0;

	/*横半分50%　縦を100vhにする*/
	width: 50%;
	height: 100vh;
}

/*右エリア*/
#container{
	/*横半分50%にする*/
	width:50%;
}


/*＝＝＝＝＝＝＝＝＝＝＝768px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:768px){
	#wrapper{
		display: block;/*display:flex;を解除*/
	}
	
	#fixed-area{
		position:relative!important;/*position stickyを解除*/
		width:100%;/*横幅を100%にして1列に見せる*/
		height: 40vh;/*縦幅を100vh⇒40vh　※任意の高さに設定可能*/
	}
	
	#container{
		width:100%;/*横幅を100%にして1列に見せる*/
	}
}

JSの書き方
768px以下では1カラムにするため、position: sticky;に対応していないブラウザ対応用のJavaScriptを、768pxより大きい場合に読み込み、他は取り除く。

$(window).on('load resize', function() {
	var windowWidth = window.innerWidth;
	var elements = $('#fixed-area');
	if (windowWidth >= 768) {
		Stickyfill.add(elements);
	}else{
		Stickyfill.remove(elements);
	} 
});

投稿日：2022年08月03日

スクロールすると画面分割した左右がそれぞれ動く

カテゴリー：エリアの動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.2/jquery.multiscroll.css">
<link rel="stylesheet" type="text/css" href="css/6-3.css">

body内にHTMLを記載します。

<header id="header">
	<h1>Logo</h1>
	<nav>
		<ul id="menu"><!--セクションとリンクするページ内アンカー-->
			<li data-menuanchor="area1" class="active"><a href="#area1">Area 1</a></li>
			<li data-menuanchor="area2"><a href="#area2">Area 2</a></li>
			<li data-menuanchor="area3"><a href="#area3">Area 3</a></li>
		</ul>
	</nav>
</header>

<div id="wrapper">

	<div class="ms-left"><!--ここから左画面-->

		<section class="ms-section" id="left1">
			<div class="sp-top"></div>
			<div class="sp-bottom">
				<h2>Area 1</h2>
				<p>テキストが入ります。</p>
			</div>
		<!--/left1--></section>

		<section class="ms-section" id="left2">
			<div class="sp-top"></div>
			<div class="sp-bottom">
				<h2>Area 2</h2>
				<p>テキストが入ります。</p>
			</div>
		<!--/left2--></section>

		<section class="ms-section" id="left3">
			<div class="sp-top"></div>
			<div class="sp-bottom">
				<h2>Area 3</h2>
				<p>テキストが入ります。</p>
			</div>
		<!--/left3--></section>

	<!--/ms-left--></div><!--/ここまで左画面-->


	<div class="ms-right"><!--ここから右画面-->

		<div class="ms-section" id="right1"></div>
		<div class="ms-section" id="right2"></div>
		<div class="ms-section" id="right3"></div>
	
	<!--/ms-right--></div><!--/ここまで右画面-->

<!--/wrapper--></div>

body 終了タグ直前に jQuery、multiScroll.js、jquery.easing.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/multiscroll.js/0.2.2/jquery.multiscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!--自作のJS-->
<script src="js/6-3.js"></script>

CSSの書き方

CSSを設定しなくても動きます。

【Headerを上付きにしたい場合】
絶対配置で上部配置し、z-indexの値を大きな数字にしてエリアの重なりの最前面に出す。

#header{
	position: relative;
	z-index:999;
}

【エリアに画像を設定したい場合】
背景画像として、background-image と backgroundsize:cover;（表示エリアいっぱいに画像を表示）を設定する。

#right1{
	background:url("pict.jpg") no-repeat center;/*中央に繰り返しなしで配置*/
	background-size:cover;/*表示エリアいっぱいに画像を表示*/
}

【PC閲覧時のみ（画面が768pxより大きい場合のみ）画面分割を行い、他は1カラムで表示させたい場合】
有料のプラグインを購入するか、右エリアを display:none;で非表示し左エリアに設置している空<div>タグ <div class=”sp-top”></div>に右エリアに設定している背景画像を表示して見せると実現できます。

@media screen and (max-width:768px){
	/*ライブラリで天地中央になっている見せ方を上揃えに上書き*/
	.ms-tableCell{
		vertical-align:top;
	}
	
	/*右上ナビゲーションと右エリア非表示*/
	#menu,
	.ms-right{
		display: none;
	}

	/*左エリアを横幅100%にして画像＋テキストを出す設定*/
	.ms-left{
		width:100%!important;
	}
	
	/*左エリア上部画像設定*/
	.sp-top{
		height:50%;
		margin:0 0 20px 0;
	}
	
	#left1 .sp-top{
		background:url("pict.jpg") no-repeat center;
		background-size:cover;
	}	
}

JSの書き方

画面分割をするエリアのID #wrapper を指定して動かす。
HTMLメニュー内のページ内リンクと連動するID名は、 anchorsで指定する。

$('#wrapper').multiscroll({
	sectionsColor: [ '#333', '#444', '#555','#333', '#444', '#555' ],//セクションごとの背景色設定
	anchors: [ 'area1', 'area2', 'area3','area4','area5','area6' ],//セクションとリンクするページ内アンカーになる名前
	menu: '#menu',//上部ナビゲーションのメニュー設定
	navigation: true,//右のナビゲーション出現、非表示は false
	navigationTooltips:[ 'Area1', 'Area2', 'Area3','Area4','Area5','Area6' ],//右のナビゲーション現在地時に入るテキスト
	loopTop: true,//最初のセクションを上にスクロールして最後のセクションまでスクロールするかどうかを定義します。
	loopBottom: true,//最後のセクションを下にスクロールして最初のセクションまでスクロールするかどうかを定義します。
});

投稿日：2022年08月03日

スクロールすると画面やエリアが時間差で重なる

カテゴリー：エリアの動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/6-2.css">

body内にHTMLを記載します。

<div id="luxy"><!--時間差で重ねるエリア全体に id="luxy"と指定-->

	<section class="area">

		<!--動かしたい要素のclassにluxy-elと指定-->
		<figure class="luxy-el" data-speed-y="8" data-offset="50"><img src="pict.jpg" alt=""></figure>
		<div class="box luxy-el" data-horizontal="1" data-speed-x="-5">
			<h2>Area1</h2>
			<p>テキストが入ります。</p>
		</div>

	</section>

</div><!--/luxy-->

<!--動きの指定のクラス名
data-speed-y・・・縦方向のパララックス効果の速度を数字で指定（マイナスの値も利用可能）
data-horizontal・・・水平方向に移動する場合に指定
data-speed-x・・・水平方向の速度（マイナスの値も利用可能）
data-offset・・・表示位置を座標で指定（マイナスの値も利用可能）
-->

body 終了タグ直前に Luxy.js（https://github.com/min30327/luxy.jsからダウンロード）と、動きを制御する自作のJS の2 つを読み込みます。

<script src="js/luxy.js"></script>
<!--自作のJS-->
<script src="js/6-2.js"></script>

CSSの書き方

CSSを設定しなくても動きます。

【Footerを下付きにしたい場合】
絶対配置で下部配置し、z-indexの値を大きな数字にしてエリアの重なりの最前面に出してください。

footer{
	position:absolute;
	width:100%;
	z-index: 999;
}

JSの書き方

luxy.init();

【横幅が768px以上の場合のみ、時間差で重なる動きを実現したい場合】
JavaScriptファイル内で、768px以上の時に時間差で重なる動きを実行するように指定します。
※ウィンドウズサイズを狭めて検証したい場合は、ページの再読み込みが必要

if(matchMedia('(min-width: 768px)').matches){
	luxy.init();
}

投稿日：2022年08月03日

スクロールすると1画面移動

カテゴリー：エリアの動き

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/6-1.css">

body内にHTMLを記載します。

<header id="header">
	<h1>Header</h1>
</header>

<main>
	<section id="box1" class="box" data-section-name="Area1"><!--data-section-nameはページネーションを表示させた際、現在地に現れるテキスト-->
		<h2>Area1</h2>
	<!--/box--></section>
	<section id="box2" class="box" data-section-name="Area2">
		<h2>Area2</h2>
	<!--/box--></section>
	<section id="box3" class="box" data-section-name="Area3">
		<h2>Area3</h2>
	<!--/box--></section>
</main>

<footer id="footer">
	<small>&copy; Copyright </small> 
</footer>

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

<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/scrollify/1.0.21/jquery.scrollify.min.js"></script>
<!--自作のJS-->
<script src="js/6-1.js"></script>

CSSの書き方

CSSを設定しなくても1ページスクロールは動きます。
下記のCSSはscrollfy.jsのページナビゲーションを使用する際に追記するCSSです。

/*========= ページネーションCSS ===============*/

.pagination {
	position:fixed;
	right:20px;
	top: 50%;
	transform: translateY(-50%);
	font-size:1em;
	z-index: 10;
	list-style: none;
}

.pagination a {
	display:block;
	height:20px;
	margin-bottom:5px;
	color:#fff;
	position:relative;
	padding:4px;
}

.pagination a.active:after {
	box-shadow:inset 0 0 0 5px;
}

/*現在地表示のテキストの設定*/
.pagination a .hover-text {
	position:absolute;
	right:15px;
	top:0;
	opacity:0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding-right: 15px;
}

.pagination a:hover .hover-text {
	opacity: 1;
}

.pagination a:after {
	-webkit-transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:"";
	position: absolute;
	margin:auto;
	top:0;
	right:3px;
	bottom:0;
}

/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) { 
	.pagination a .hover-text{
		display: none;
	}	
}

JSの書き方

$.scrollify({
	section : ".box",//1ページスクロールさせたいエリアクラス名
	scrollbars:"false",//スクロールバー表示・非表示設定
	interstitialSection : "#header,#footer",//ヘッダーフッターを認識し、1ページスクロールさせず表示されるように設定
	easing: "swing", // 他にもlinearやeaseOutExpoといったjQueryのeasing指定可能
	scrollSpeed: 300, // スクロール時の速度

	//以下、ページネーション設定
	before:function(i,panels) {
		var ref = panels[i].attr("data-section-name");
		$(".pagination .active").removeClass("active");
		$(".pagination").find("a[href=\"#" + ref + "\"]").addClass("active");
	},
	afterRender:function() {
		var pagination = "";
		var activeClass = "";
		$(".box").each(function(i) {//1ページスクロールさせたいエリアクラス名を指定
			activeClass = "";
			if(i===$.scrollify.currentIndex()) {
				activeClass = "active";
			}
			pagination += "" + $(this).attr("data-section-name").charAt(0).toUpperCase() + $(this).attr("data-section-name").slice(1) + "";
		});
		pagination += "";

		$("#box1").append(pagination);//はじめのエリアにページネーションを表示
		$(".pagination a").on("click",$.scrollify.move);
	}

});

投稿日：2022年08月03日

円グラフ（ドーナッツ型）

カテゴリー：グラフ

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/9-5-7.css">

body内のグラフを表示させたい場所にid名を付けたcanvasタグを記載します。

<div class="chart-area">
<canvas id="chart02"></canvas>
</div>

body 終了タグ直前に jQuery、Chart.js、jquery.inview.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/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<!--自作のJS-->
<script src="js/9-5-7.js"></script>

CSSの書き方

.chart-area{/*円グラフがスマホでつぶれないようにする*/
	position: relative;
	width:100%;
	height:50vh;
}

JSの書き方

//値をグラフに表示させる
Chart.plugins.register({
	afterDatasetsDraw: function (chart, easing) {
		var ctx = chart.ctx;
		chart.data.datasets.forEach(function (dataset, i) {
			var meta = chart.getDatasetMeta(i);
			if (!meta.hidden) {
				meta.data.forEach(function (element, index) {

					// 値の表示
					ctx.fillStyle = 'rgb(0, 0, 0,0.8)';//文字の色
					var fontSize = 12;//フォントサイズ
					var fontStyle = 'normal';//フォントスタイル
					var fontFamily = 'Arial';//フォントファミリー
					ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
					var dataString = dataset.data[index].toString();
					
					// 値の位置
					ctx.textAlign = 'center';//テキストを中央寄せ
					ctx.textBaseline = 'middle';//テキストベースラインの位置を中央揃え
					var padding = 5;//余白
					var position = element.tooltipPosition();
					ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);		
				});
			}
		});
	}
});


//=========== 円グラフ（ドーナッツ型） ============//

$('#chart02').on('inview', function(event, isInView) {//画面上に入ったらグラフを描画
	if (isInView) {
		var ctx=document.getElementById("chart02");//グラフを描画したい場所のid
		var chart=new Chart(ctx,{
		type:'doughnut',//グラフのタイプ
		data:{//グラフのデータ
			labels:[ "IT","営業","不動産","医療", ],//データの名前
			datasets:[ {
				label:"職種別比率",//グラフのタイトル
				backgroundColor:[ "#BB5179","#FAFF67", "#58A27C","#3C00FF" ],//グラフの背景色
				data:[ "20","30","10","40", ]//データ
			}]
		},
		options:{//グラフのオプション
			maintainAspectRatio: false,//CSSで大きさを調整するため、自動縮小をさせない
			cutoutPercentage:55,//中央からの空円の太さ。グラフの太さ変更
			legend:{
				display:true//グラフの説明を表示
			},
			tooltips:{//グラフへカーソルを合わせた際の詳細表示の設定
				callbacks:{
					label: function (tooltipItem, data) {
						return data.labels[tooltipItem.index]+ ": "+ data.datasets[0].data[tooltipItem.index] + "%";//%を最後につける
					}
				},		
			},
			title:{//上部タイトル表示の設定
				display: true,
				fontSize:10,
				text: '単位：%'
			},
		}
	});
}
});

投稿日：2022年08月01日

JS

カテゴリーページ

スクロールすると画面分割した右側が動く

スクロールすると画面分割した左右がそれぞれ動く

スクロールすると画面やエリアが時間差で重なる

スクロールすると1画面移動

円グラフ（ドーナッツ型）

アーカイブ