スクロールダウン | イセンチュートリアルサイト

カテゴリーページ

ボタンをクリックして無限スクロール

HTMLの書き方

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

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

body内に無限スクロールをさせたいコンテンツのHTMLを記載します。

<div class="wrapper">
	<ul class="article-list"><!--無限読み込みをさせたい要素を囲う親のクラス名をarticle-listに指定-->
		<li>内容</li>
		<li>内容</li>
		<li>内容</li>
	</ul>
	<div class="navigation"><a href="page-2.html">続きを表示</a></div><!--クリックするボタンのクラス名をnavigationに指定-->
</div>

そのHTMLをコピーして、2 ページ目以降に読み込みたいHTMLをつくります。
その際、HTMLの名前を任意の名前＋数字（例：page-2.html、page-3.html）にします。

<div class="navigation"><a href="page-2.html">続きを表示</a></div>
<!--2ページ目以降はリンク先の数字の部分が自動的に連番が付与されて読み込まれます-->

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

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"></script>
<!--自作のJS-->
<script src="js/9-1-8.js"></script>

CSSの書き方

/*ローディングが表示されるエリアの設定*/
#infscr-loading {
	width:100%;
	text-align:center;
	margin:20px auto;
}

#infscr-loading img{
	width:30px;/*ローディング画像のサイズ*/
}

JSの書き方

//無限読み込みInfiniteScroll
$('.article-list').infinitescroll({	//無限読み込みをさせたい要素を囲う親のクラス名を指定
	navSelector  : ".navigation",//次のページを読み込むリンクを囲んでいるクラス名を指定
	nextSelector : ".navigation a",//次のページにリンクする要素を指定
	itemSelector : ".article-list li",//無限スクロールで表示をさせたい要素を指定
	maxPage : 3,//読み込む全体のページ数。入れないと連番でURLが読まれて404エラーが出る
	animate: true, //アニメーション処理を行う
	loading: {
		finishedMsg: "全ての記事が読み込まれました", //全ての要素が読み込まれた後の終了メッセージ
		msgText: "読み込み中", //ローディング中の表示テキスト
		img: 'svg/loading.svg', //ローディング中の画像を指定
	},
},
function(newArticle) {
	$(newArticle).hide().delay(100).fadeIn(900); // 0.9秒かけてフェードイン
	$(".navigation").appendTo(".wrapper").css("display","block"); //navigationをwrapperの一番最後に移動して表示
});
	
//ボタンをクリックしたら表示する設定
$('.article-list').infinitescroll('unbind');//初期値にもどして
// ボタンをクリックしたら要素を表示。ボタンのリンク機能は無効
$(".navigation a").click(function(){
	$('.article-list').infinitescroll('retrieve');
	return false;
});

投稿日：2022年08月01日

無限スクロール

カテゴリー：スクロールダウン

HTMLの書き方

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

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

body内に無限スクロールをさせたいコンテンツのHTMLを記載します。

<div class="wrapper">
	<ul class="article-list"><!--無限読み込みをさせたい要素を囲う親のクラス名をarticle-listに指定-->
		<li>内容</li>
		<li>内容</li>
		<li>内容</li>
	</ul>
	<div class="navigation"><a href="page-2.html">続きを表示</a></div><!--次のページを読み込むきっかけのクラス名をnavigationに指定-->
</div>

そのHTMLをコピーして、2 ページ目以降に読み込みたいページをつくります。
その際、HTMLの名前を任意の名前＋数字（例：page-2.html、page-3.html）にします。

<div class="navigation"><a href="page-2.html">続きを表示</a></div>
<!--2ページ目以降はリンク先の数字の部分が自動的に連番が付与されて読み込まれます-->

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

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"></script>
<!--自作のJS-->
<script src="js/9-1-7.js"></script>

CSSの書き方

/*ローディングが表示されるエリアの設定*/
#infscr-loading {
	width:100%;
	text-align:center;
	margin:20px auto;
}

#infscr-loading img {
	width:30px;/*ローディング画像のサイズ*/
}

JSの書き方

//無限読み込みInfiniteScroll
$('.article-list').infinitescroll({	//無限読み込みをさせたい要素を囲う親のクラス名を指定
	navSelector  : ".navigation",//次のページを読み込むリンクを囲んでいるクラス名を指定
	nextSelector : ".navigation a",//次のページにリンクする要素を指定
	itemSelector : ".article-list li",//無限スクロールで表示をさせたい要素を指定
	maxPage : 3,///読み込む全体のページ数。入れないと連番でURLが読まれて404エラーが出る
	animate: true, //アニメーション処理を行う
	loading: {
		finishedMsg: "全ての記事が読み込まれました", //全ての要素が読み込まれた後の終了メッセージ
		msgText: "読み込み中", //ローディング中の表示テキスト
		img: 'svg/loading.svg', //ローディング中の画像を指定
	},
});

$('.article-list').hide().delay(100).fadeIn(900);//0.9秒かけてフェードイン

投稿日：2022年08月01日

スクロールをするとタイムラインの縦線が伸びる

カテゴリー：スクロールダウン

HTMLの書き方

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

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

body内にタイムラインのHTMLを記載します。

<ul class="timeline">
	<li><!--線が伸びる基準となるHTML。liを基準として、spanに指定された線を伸ばします。-->
		<dl>
			<dt>2000</dt>
			<dd>内容</dd>
		</dl>
		<span class="border-line"></span>
	</li>
	<li>
		<dl>
			<dt>2002</dt>
			<dd>内容</dd>
		</dl>
		<span class="border-line"></span>
	</li>
</ul>

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/9-1-6.js"></script>

CSSの書き方

/*タイムライン全体の設定*/
.timeline{
	max-width: 400px;
	width:100%;
	margin:50px auto;
	padding:0 30px;
}

.timeline li{
	/*線の起点とするためrelativeを設定*/
	position: relative;
	list-style: none;
	padding:0 0 20px 0;
}

.timeline dl{
	margin:0 0 20px 3em;
}

/*絶対配置で線を設定*/
.border-line {
	/*線の位置*/
	position: absolute;
	left:0.2em;
	top:0;
	width:2px;/*線の太さ*/
	height:0;/*はじめは高さを0に*/
	background: #ccc;
}

/*タイムラインの見出し横の丸の位置と形状*/
.timeline li::after{
	content:'';
	position: absolute;
	top:0;
	left:0;
	width:10px;
	height: 10px;
	background:#666;
	border-radius: 50%;
}

JSの書き方

//線が伸びるための設定を関数でまとめる
function ScrollTimelineAnime(){
	$('.timeline li').each(function(){// それぞれのli要素の
		var elemPos = $(this).offset().top;// 上からの高さ取得
		var scroll = $(window).scrollTop();// スクロール値取得
		var windowHeight = $(window).height();// windowの高さ取得
		var startPoint = 100; //線をスタートさせる位置を指定※レイアウトによって調整してください
		if (scroll >= elemPos - windowHeight-startPoint){				
			var H = $(this).outerHeight(true)//liの余白と高さを含めた数値を取得

			//スクロール値から要素までの高さを引いた値を、liの高さの半分のパーセントで出す
			var percent = (scroll+startPoint - elemPos) / (H/2) *100;//liの余白と高さの半分で線を100％に伸ばす

			// 100% を超えたらずっと100%を入れ続ける
			if(percent  > 100){
				percent  = 100;
			}

			// ボーダーの長さをセット
			$(this).children('.border-line').css({
				height: percent + "%", //CSSでパーセント指定
			});
		} 
	});
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).on('scroll', function(){
	ScrollTimelineAnime();// 線が伸びる関数を呼ぶ
});

// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
	ScrollTimelineAnime();// 線が伸びる関数を呼ぶ
});

投稿日：2022年08月01日

スクロールをするとエリアの高さに合わせて線が伸びる

カテゴリー：スクロールダウン

HTMLの書き方

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

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

高さを計測したいエリアにid（今回はcontainer）を付けます。

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

<main id="container">
	<p>この中にコンテンツの内容が入ります。</p>
</main>

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

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

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollgress/2.0.0/scrollgress.min.js"></script>
<script src="js/9-1-5.js"></script>

CSSの書き方
JavaScript で付与されるバー表示の.scrollgress というクラス名に対し、表示位置や要素の重なり順（z-index）を指定します。
※今回はheaderの下にバーを表示させたいため、top の位置を!important を付けてJavaScript で指定されたCSS を上書きます。

/*========= バー表示のためのCSS ===============*/

.scrollgress{
	z-index: 3;/*他のposition指定しているエリアより前に出すためz-indexの数字を大きく*/
	top:70px!important;/* fixedで設置しているheaderの高さよりも下にバーを出す*/
}

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

/*検証用のレイアウトのためのCSS*/
#container{
	height: 2000px;
}

JSの書き方
高さを計測したいエリアのid を指定し、線の高さと色を設定します。

$('#container').scrollgress({//バーの高さの基準となるエリア指定
	height: '5px',//バーの高さ
	color: '#990000',//バーの色
});

投稿日：2022年08月01日

矢印が動いてスクロールを促す

カテゴリー：スクロールダウン

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

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

body内のスクロールダウンアイコンを表示させたい場所にHTMLを記載します。

<div class="scrolldown4"><span>Scroll</span></div>

CSSの書き方

/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
	/*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:1%;
	right:50%;
	
	/*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
	0%{
		bottom:1%;
	}
	50%{
		bottom:3%;
	}
	100%{
		bottom:1%;
	}
}

/*Scrollテキストの描写*/
.scrolldown4 span{
	/*描画位置*/
	position: absolute;
	left:-20px;
	bottom:10px;

	/*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;

	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
	content: "";

	/*描画位置*/
	position: absolute;
	bottom: 0;
	right: -6px;

	/*矢印の形状*/
	width: 1px;
	height: 20px;
	background: #eee;
	transform: skewX(-31deg);
}

.scrolldown4:after{
	content:"";

	/*描画位置*/
	position: absolute;
	bottom:0;
	right:0;

	/*矢印の形状*/
	width:1px;
	height: 50px;
	background:#eee;
}

投稿日：2022年08月01日

CSS

カテゴリーページ

ボタンをクリックして無限スクロール

無限スクロール

スクロールをするとタイムラインの縦線が伸びる

スクロールをするとエリアの高さに合わせて線が伸びる

矢印が動いてスクロールを促す

アーカイブ