<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<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/scrollgress/0.2.0/scrollgress.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js">
</script>
<style>@charset "utf-8";
/*========= バー表示のためのCSS ===============*/
.scrollgress {
z-index: 3; /*他のposition指定しているエリアより前に出すためz-indexの数字を大きく*/
top: 70px !important; /* fixedで設置しているheaderの高さよりも下にバーを出す*/
}
/*========= バー表示のためのCSS ===============*/
/*タイムライン全体の設定*/
.timeline {
max-width: 400px;
width: 100%;
margin: 50px auto;
padding: 0 20px;
}
.timeline li {
/*線の起点とするためrelativeを設定*/
position: relative;
list-style: none;
padding: 0 0 20px 0;
}
.timeline dl {
margin: 0 0 20px 3em;
}
.timeline dd strong {
display: block;
padding: 10px 0;
}
/*絶対配置で線を設定*/
.border-line {
/*線の位置*/
position: absolute;
left: 0.2em;
top: 0;
width: 4px; /*線の太さ*/
height: 0; /*はじめは高さを0に*/
background: #40e0d0;
}
/*タイムラインの見出し横の丸の位置と形状*/
.timeline li::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: #aaa;
border-radius: 50%;
}
/*========= レイアウトのためのCSS ===============*/
body {
width: 100%;
height: 100vh;
vertical-align: middle;
}
h1 {
font-size: 1.2rem;
}
#container h2 {
font-size: 1.2rem;
text-align: center;
}
#container p {
margin-top: 20px;
}
small {
background: #333;
color: #fff;
display: block;
text-align: center;
padding: 20px;
}
#header {
position: fixed; /*Header固定*/
top: 0;
height: 70px; /*高さ指定*/
z-index: 2;
width: 100%;
/*装飾のためのCSS*/
background: #333;
color: #fff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
section {
padding: 50px 30px;
}
section:nth-child(2n) {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: linear-gradient(
0deg,
rgba(255, 255, 255, 1) 5%,
rgba(252, 225, 208, 1) 15%,
rgba(255, 173, 214, 1) 50%,
rgba(162, 186, 245, 0.8) 80%,
rgba(255, 255, 255, 1) 95%
);
}
#footer {
position: relative;
z-index: 2;
}
.caution {
color: red;
text-align: center;
font-size: clamp(12px, 2.5vw, 14px);
font-weight: bold;
white-space: nowrap;
margin-top: 100px;
}</style>
</head>
<body>
<body>
<header id="header">
<h1>WEB先案内の名言コレクション</h1>
</header>
<p class="caution">スクロールするとタイムラインの縦線が伸びる<br>↓ ↓ ↓</p>
<main id="container">
<section>
<h2>MARVEL上映 と 世界の主な出来事</h2>
<ul class="timeline">
<li>
<dl>
<dt>2008</dt>
<dd>
<strong>アイアンマン</strong>米大統領選オバマ当選</dd>
</dl>
<span class="border-line">
</span>
</li>
<li>
<dl>
<dt>2009</dt>
<dd>
<strong>アイアンマン２</strong>政権交代：民主</dd>
</dl>
<span class="border-line">
</span>
</li>
<li>
<dl>
<dt>2010</dt>
<dd>
<strong>ハルク</strong>JAL経営破綻</dd>
</dl>
<span class="border-line">
</span>
</li>
<li>
<dl>
<dt>2011</dt>
<dd>
<strong>キャプテン・アメリカ</strong>東日本大震災</dd>
</dl>
<span class="border-line">
</span>
</li>
<li>
<dl>
<dt>2012</dt>
<dd>
<strong>アベンジャーズ</strong>政権交代：自民</dd>
</dl>
<span class="border-line">
</span>
</li>
<li>
<dl>
<dt>2013</dt>
<dd>
<strong>マイティ・ソー/ダーク・ワールド</strong>スノーデン国家機密暴露</dd>
</dl>
<span class="border-line">
</span>
</li>
<li>
<dl>
<dt>2014</dt>
<dd>
<strong>ガーディアンズ・オブ・ギャラクシー</strong>STAP問題（マスゴミの集団リンチ）</dd>
</dl>
<span class="border-line">
</span>
</li>
<li>
<dl>
<dt>2015</dt>
<dd>
<strong>アベンジャーズ/エイジ・オブ・ウルトロン</strong>安全保障関連法成立</dd>
</dl>
<span class="border-line">
</span>
</li>
<li>
<dl>
<dt>2016</dt>
<dd>
<strong>シビル・ウォー/キャプテン・アメリカ</strong>米大統領選トランプ当選</dd>
</dl>
<span class="border-line">
</span>
</li>
<li>
<dl>
<dt>2017</dt>
<dd>
<strong>マイティ・ソー/バトルロイヤル</strong>森友・加計・日報問題</dd>
</dl>
<span class="border-line">
</span>
</li>
</li>
<li>
<dl>
<dt>2018</dt>
<dd>
<strong>アベンジャーズ/インフィニティ・ウォー</strong>ゴーン元日産
会長逮捕</dd>
</dl>
<span class="border-line">
</span>
</li>
</li>
<li>
<dl>
<dt>2020</dt>
<dd>
<strong>アベンジャーズ/エンドゲーム</strong>COVID-19流行</dd>
</dl>
<span class="border-line">
</span>
</li>
</ul>
<h2>名言 1</h2>
<p>人はそれぞれ事情をかかえ、平然と生きている</p>
<p>ベストを尽くして失敗したら、ベストを尽くしたってことさ</p>
<p>いちばんいけないのはじぶんなんかだめだと思いこむことだよ</p>
<p>この世に生を受けたこと。それ自体が最大のチャンスではないか</p>
<!--/area1-->
</section>
<section>
<h2>名言 2</h2>
<p>ろくな晩じゃねぇや。寝ちまえ、寝ちまえ。寝て起きりゃ別の日だ</p>
<p>世の中ってオレより頭のいい人のほうが多いんだ</p>
<p>何かを捨てないと前に進めない</p>
<p>弱気は最大の敵</p>
<!--/area2-->
</section>
<section id="area-3">
<h2>名言 3</h2>
<p>いつか、必ず、チャンスの順番が来ると信じなさい</p>
<p>前向きにもがき苦しむ経験は、すぐに結果に結びつかなくても、必ず自分の生きる力になっていく</p>
<p>「ゴールは遠いなぁ」と、がっかりするのも道のりです</p>
<p>「負けたことがある」というのが いつか 大きな財産になる</p>
<!--/area3-->
</section>
<!--/main-->
</main>
<footer id="footer">
<small>© copyright.</small>
</footer>
<script>//線が伸びるための設定を関数でまとめる
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(); // 線が伸びる関数を呼ぶ
});
//# sourceURL=pen.js</script>
</body>
</html>