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

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

デモページを見る

See the Pen 9-1-6　スクロールをするとタイムラインの縦線が伸びる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」下のRerunを押して動きを確かめてね！↑

動きを実現する仕組み

jQuery を使い、スクロールの動きが要素の半分の高さまで来たら、CSS で指定した線を100% に伸ばす。

［使用するライブラリ］
＊ jQuery

HTMLの書き方

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

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

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>
</body>

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