CSS

カテゴリーページ

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

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日

マウスが動いてスクロールを促す

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

HTMLの書き方

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

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

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

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

CSSの書き方

/*=== 9-1-3 マウスが動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown3{
	/*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:10px;
	right:50%;

	/*マウスの動き1.6秒かけて動く永遠にループ*/
	animation:mousemove 1.6s ease-in-out infinite;
}

/*下からの距離が変化して上から下に動く*/
@keyframes mousemove{
	0%{
		bottom:10px;
	}
	50%{
		bottom:5px;
	}
	100%{
		bottom:10px;
	}
 }

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

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

/*マウスの中の線描写 */
.scrolldown3 span::after{
	content: "";

	/*描画位置*/
	position: absolute;
	top:10px;
	left:17px;

	/*線の形状*/
	width: 1px;
	height: 15px;
	background: #eee;

	/*線の動き1.4秒かけて動く。永遠にループ*/
	animation: mousepathmove 1.4s linear infinite;
	opacity:0;
}

/*上からの距離・不透明度・高さが変化して上から下に流れる*/
@keyframes mousepathmove{
	0%{
		height:0;
		top:10px;
		opacity: 0;
	}
	50%{
		height:15px;
		opacity: 1;
	}
	100%{
		height:0;
		top:30px;
		opacity: 0;
	}
}

/*マウスの描写 */
.scrolldown3:before {
	content: "";

	/*描画位置*/
	position: absolute;
	bottom:0;
	left:-10px;

	/*マウスの形状*/
	width:25px;
	height:37px;
	border-radius: 10px;
	border:1px solid #eee;
}


/*マウスの中の丸の描写*/
.scrolldown3:after{
	content:"";

	/*描画位置*/
	position: absolute;
	bottom:26px;
	left:0;

	/*丸の形状*/
	width:5px;
	height: 5px;
	border-radius: 50%;
	border:1px solid #eee;
}

投稿日：2022年08月01日

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

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

HTMLの書き方

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

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

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

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

CSSの書き方

/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
	/*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:10px;
	left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
	/*描画位置*/
	position: absolute;
	left:10px;
	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;
}

/* 丸の描写 */
.scrolldown2:before {
	content: "";

	/*描画位置*/
	position: absolute;
	bottom:0;
	left:-4px;

	/*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#eee;

	/*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
	circlemove 1.6s ease-in-out infinite,
	cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
	0%{
		bottom:45px;
	}
	100%{
		bottom:-5px;
	}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
	0%{
		opacity:0
	}
	50%{
		opacity:1;
	}
	80%{
		opacity:0.9;
	}
	100%{
		opacity:0;
	}
}

/* 線の描写 */
.scrolldown2:after{
	content:"";

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

	/*線の形状*/
	width:2px;
	height: 50px;
	background:#eee;
}

投稿日：2022年08月01日

カテゴリーページ

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

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

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

マウスが動いてスクロールを促す

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

アーカイブ