ホーム

HTMLの書き方

body内のカウントアップ・ダウンを表示させたい場所にHTMLを記載します。

<div id="box1" class="box"><!--画面に入ったら数字を動かす基点にするためのid を付与-->
	<p>男性の学生数<br><span class="count-up count-size">2540</span>人</p><!-- count-up ← カウントアップ用class名-->
<!--/box--></div>
<div id="box2" class="box"><!--画面に入ったら数字を動かす基点にするためのid を付与-->
	<p>学食充実満足度全国<br>第<span class="count-down count-size">1</span>位</p><!-- count-down ← カウントダウン用class名-->
<!--/box--></div>

body 終了タグ直前にjQuery、jquery.inview、動きを制御する自作の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/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<!--自作のJS-->
<script src="js/9-5-1.js"></script>

JSの書き方

//box1の指定
$('#box1').on('inview', function(event, isInView) {
	if (isInView) {

		//要素が見えたときに実行する処理
		$("#box1 .count-up").each(function(){
			$(this).prop('Counter',0).animate({//0からカウントアップ
				Counter: $(this).text()
		}, {
				// スピードやアニメーションの設定
				duration: 2000,//数字が大きいほど変化のスピードが遅くなる。2000=2秒
				easing: 'swing',//動きの種類。他にもlinearなど設定可能
				step: function (now) {
					$(this).text(Math.ceil(now));
				}
			});
		});
	}
});

//box2の指定
$('#box2').on('inview', function(event, isInView) {
	if (isInView) {

		//要素が見えたときに実行する処理
		$("#box2 .count-down").each(function(){
			$(this).prop('Counter',10).animate({//10からカウントダウン
				Counter: $(this).text()
		}, {
				// スピードやアニメーションの設定
				duration: 1000,//数字が大きいほど変化のスピードが遅くなる。1000=1秒
				easing: 'swing',//動きの種類。他にもlinearなど設定可能
				step: function (now) {
					$(this).text(Math.ceil(now));
				}
			});
		});
	}
});

※768px以下で動きを解除しているため、スマートフォンからの確認は出来ません。
 

HTMLの書き方

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

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css">
<link rel="stylesheet" type="text/css" href="css/9-4-1.css">

body内のニュースティッカーを表示させたい場所に以下のHTMLを記載します。

<ul class="slider">
	<li><a href="#"><span>2021.11.01</span>1 つめのニュースの記事です。</a></li>
	<li><a href="#"><span>2021.11.02</span>2 つめのニュースの記事です。</a></li>
	<li><a href="#"><span>2021.11.03</span>3 つめのニュースの記事です。</a></li>
</ul>

body 終了タグ直前に jQuery、bxSlider、動きを制御する自作のJS の3 つを読み込みます。
また、IE11 に対応したい場合はIE対策用のJSを追加で2 つ読み込みます。

<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/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<!--自作のJS-->
<script src="js/9-4-1.js"></script>

CSSの書き方

/*ニュース1行の周りの余白*/
.slider a{
	display: block;
	background:#fff;
	padding:20px;
}

/*日付*/
.slider span {
	display:inline-block;
	font-size:0.8rem;
	margin-right:10px;
	color:#777;
}

/*768px以下の見た目 ※1行のままにしたい場合は不要　*/
@media screen and (max-width:768px) {
	.slider {
		padding:20px;
		background:#fff;
	}

	.slider li {
		border-bottom:1px dashed #ccc;
	}

	.slider li:last-child {
		border-bottom:none;
	}

	.slider span {
		display:block;
		padding-bottom:10px;
	}
}

JSの書き方

var slider;
var sliderFlag = false;
var breakpoint = 768;//768px以下の場合
  
function sliderSet() {
	var windowWidth = window.innerWidth;
	if (windowWidth >= breakpoint && !sliderFlag) {//768px以上は1行でスライダー表示
		slider = $('.slider').bxSlider({
			touchEnabled:false,//リンクを有効にするためスライドをマウスでドラッグした際にスライドの切り替えを可能にする機能を無効化
			mode: 'vertical',//縦スライド指定
			controls: false,//前後のコントロールを表示させない。
			auto: 'true',//自動的にスライド
			pager: false//ページ送り無効化
		});
		sliderFlag = true;
	} else if (windowWidth < breakpoint && sliderFlag) {
		slider.destroySlider();//bxSliderのOptionであるdestroySliderを使用してスライダーの動きを除去
		sliderFlag = false;
	}
}

$(window).on('load resize', function() {
	sliderSet();
});

タブレット以下も1行で表示させたい場合は下記のみの記述でOK

$('.slider').bxSlider({
	touchEnabled:false,//リンクを有効にするためスライドをマウスでドラッグした際にスライドの切り替えを可能にする機能を無効化
	mode: 'vertical',
	controls: false,
	auto: 'true',
	pager: false
});

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;
});	

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秒かけてフェードイン

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();// 線が伸びる関数を呼ぶ
});