エリアの動き | イセンチュートリアルサイト

カテゴリーページ

スクロールするとヘッダー背景画像が拡大

HTMLの書き方

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

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

body内にHTMLを記載します。

<header id="header">
	<h1>Logo</h1>
	<div id="header-img"></div>
</header>

<main id="container">
	<section>
		<h2>Area 1</h2>
	<!--/section--></section>
<!--/main--></main>

<footer id="footer">
	<small>&copy; copyright.</small>
</footer>

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

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/6-7.js"></script>

CSSの書き方

#header{
	position: relative;/*背景を設定するdivの基点とするためrelativeをかける*/
	width: 100%;
	height:100vh;
	overflow: hidden;/*はみ出しているところを隠す*/
}

#header-img{
	position: fixed;/*背景を固定するためfixedをかける*/
	z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
	top: 0;/*topの位置がJSで変化*/

	/*以下画面で背景画像を表示させるための指定*/
	width: 100%;
	height:100vh;
	background: url("../img/pict.jpg") no-repeat top center;/*背景画像の設定※オリジナルの画像に設定してください*/
	background-size:cover;
	transform-origin:center;/*変化する基点を中心からに設定*/
}

#container,
#footer{
	position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
	z-index: 2/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
}

/*ロゴを中央に配置*/
#header h1{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;/*#header-imgよりも手前に配置*/
}

JSの書き方

$(window).scroll(function() {
	var scroll = $(window).scrollTop();//スクロール値を定義
	//header-imgの背景
	$('#header-img').css({
		transform: 'scale('+(100 + scroll/10)/100+')',//スクロール値を代入してscale1から拡大.scroll/10の値を小さくすると拡大値が大きくなる
		top: -(scroll/50)  + "%",//スクロール値を代入してtopの位置をマイナスにずらす
	});
});

投稿日：2022年08月03日

スクロールすると下のエリアがヘッダーにかぶさる

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

HTMLの書き方

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

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

body内にHTMLを記載します。

<header id="header">
	<h1>Scroll me</h1>
</header>
<div id="container">
	<p>このエリアがスクロールすると上にかぶさります</p> 
<!--/container--></div>

CSSの書き方

#header{
	/*headerを全画面で見せる*/
	width:100%;
	height: 100vh;
	position: relative;
} 

#header:before{
	/*headerの疑似要素に背景画像を指定*/
	content:"";
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 100vh;
	background:url("../img/pict.jpg") no-repeat center;/*背景画像設定※オリジナル画像を設定してください*/
	background-size:cover;
}

#container{
	/*下のかぶさるエリアの指定*/
	position: relative;
	z-index:1;
	/*以下はレイアウトのための記述。削除可能*/
	background:#fff;
	padding:600px 0;
}

投稿日：2022年08月03日

スクロールすると紙芝居風に展開

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

HTMLの書き方

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

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

body内にHTMLを記載します。

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

<main id="container">

	<section class="fixed">
		<h2>Area 1</h2>
	<!--/area1--></section>

	<section class="fixed">
		<h2>Area 2</h2>
	<!--/area2--></section>

	<section class="fixed">
		<h2>Area 3</h2>
	<!--/area3--></section>

<!--/main--></main>

<footer id="footer">
	<small>&copy; copyright.</small>
</footer>

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-5.js"></script>

CSSの書き方

#header{
	position: fixed;/*Header固定*/
	top:0;
	height: 70px;/*高さ指定*/
	z-index: 2;
	width:100%;
	background:#fff;/*背景色*/
}

#container{
	position: relative;
	z-index: 1;/*header とfooterを手前にするため数字を小さく*/
}

section.fixed{
	position: -webkit-sticky;/*Safari*/
	position: sticky;
	top:70px;/*Header高さ分で止まるようにする*/
	padding: 600px 0;/*デモ画面の高さを持たすための上下余白*/
}

section.fixed:nth-child(odd){
	background:#666;/*デモ画面の奇数背景色*/
}

section.fixed:nth-child(even){
	background:#333;/*デモ画面の偶数背景色*/
}

section.fixed:last-of-type{
	padding-top:70px;
	/*最後のセクションだけ止まらないため、エリア内の情報が少ない時は、Header分の高さをpadding-topに追加して上部が見えるようにする*/
}
#footer{
	position: relative;
	z-index: 2;
}


/*＝＝＝＝＝タブレット以下の見え方 ＝＝＝＝＝*/

@media screen and (max-width:768px){
	section.fixed{
		position:relative!important;/*sticky解除*/
		top:0;/*70px⇒0pxに戻す*/
	}
	section.fixed:first-of-type{
		padding-top:100px;
		/*最初の要素は上部にHeaderの高さ以上の余白をとる*/
	}
}

JSの書き方

768px以下では紙芝居風を解除するため、position: sticky;に対応していないブラウザ対応用のJavaScriptを、768pxより大きい場合に読み込む。

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

投稿日：2022年08月03日

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

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

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日

JS

カテゴリーページ

スクロールするとヘッダー背景画像が拡大

スクロールすると下のエリアがヘッダーにかぶさる

スクロールすると紙芝居風に展開

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

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

アーカイブ