<!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>
<style>@charset "utf-8";
/*========= ページトップのためのCSS ===============*/
/*リンクの形状*/
#page-top a {
display: flex;
justify-content: center;
align-items: center;
background: #942d2f;
border-radius: 5px;
width: 60px;
height: 60px;
color: #fff;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-size: 0.6rem;
transition: all 0.3s;
}
#page-top a:hover {
background: #777;
}
@media screen and (max-width: 768px) {
#page-top a:hover {
background: #942d2f;
}
}
/*リンクを右下に固定*/
#page-top {
position: fixed;
right: 10px;
bottom: 10px;
z-index: 2;
/*はじめは非表示*/
opacity: 0;
transform: translateY(100px);
}
/* 上に上がる動き */
#page-top.UpMove {
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 下に下がる動き */
#page-top.DownMove {
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(100px);
}
}
/*========= レイアウトのためのCSS ===============*/
body {
width: 100%;
height: 100vh;
vertical-align: middle;
}
h1 {
font-size: 1.2rem;
}
h2 {
font-size: 1.2rem;
text-align: center;
margin: 0 0 30px 0;
}
p {
margin-top: 20px;
}
small {
color: #fff;
display: block;
text-align: center;
padding: 20px;
}
#header {
background: #333;
color: #fff;
text-align: center;
padding: 20px;
}
section {
padding: 15vh 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, 1.2rem);
font-weight: bold;
white-space: nowrap;
}</style>
</head>
<body>
<body>
<header id="header">
<h1>WEB先案内の名言コレクション</h1>
</header>
<p class="caution">スクロールすると名言３のセクションのみ<br>右下に「PAGE TOP」のリンクが下から現れます<br>↓ ↓ ↓</p>
<main>
<section id="area-1">
<h2>名言 1</h2>
<p>人はそれぞれ事情をかかえ、平然と生きている</p>
<p>ベストを尽くして失敗したら、ベストを尽くしたってことさ</p>
<p>いちばんいけないのはじぶんなんかだめだと思いこむことだよ</p>
<p>この世に生を受けたこと。それ自体が最大のチャンスではないか</p>
<!--/area1-->
</section>
<section id="area-2">
<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>
<section id="area-4">
<h2>名言 4</h2>
<p>前進できぬ駒はない</p>
<p>「仕事はナメてかかって、真面目にやれ」と思っている。俺は、どの仕事もそうしてきているんです</p>
<p>自分を少し抑えて、肩の力を抜けば、仕事は長続きする</p>
<p>常に今日は明日の準備ですからね。今日やったことは必ず明日に返ってくるんです</p>
<!--/area4-->
</section>
<section id="area-5">
<h2>名言 5</h2>
<p>強い者が勝つのではない。勝った者が強いのだ</p>
<p>自分がわかっていないことがわかるということが一番賢いんです</p>
<p>成功の反対は失敗ではなく「やらないこと」だ</p>
<p>自分が幸せかどうかは、自分で決めるしかないのよ</p>
<!--/area5-->
</section>
<!--/main-->
</main>
<footer id="footer">
<p id="page-top">
<a href="#">Page Top</a>
</p>
<small>© copyright.</small>
</footer>
<script>//スクロールした際の動きを関数でまとめる
function setFadeElement() {
var windowH = $(window).height(); //ウィンドウの高さを取得
var scroll = $(window).scrollTop(); //スクロール値を取得
//出現範囲の指定
var contentsTop = Math.round($("#area-3").offset().top); //要素までの高さを四捨五入した値で取得
var contentsH = $("#area-3").outerHeight(true); //要素の高さを取得
//2つ目の出現範囲の指定※任意
//var contentsTop2 = Math.round($('#area-5').offset().top); //要素までの高さを取得
//var contentsH2 = $('#area-5').outerHeight(true);//要素の高さを取得
//出現範囲内に入ったかどうかをチェック
if (
scroll + windowH >= contentsTop &&
scroll + windowH <= contentsTop + contentsH)
{
$("#page-top").addClass("UpMove"); //入っていたらUpMoveをクラス追加
$("#page-top").removeClass("DownMove"); //DownMoveを削除
$(".hide-btn").removeClass("hide-btn"); //hide-btnを削除
} //2つ目の出現範囲に入ったかどうかをチェック※任意
// else if(scroll+windowH >= contentsTop2 && scroll+windowH <= contentsTop2+contentsH2){
//$("#page-top").addClass("UpMove"); //入っていたらUpMoveをクラス追加
//$("#page-top").removeClass("DownMove"); //DownMoveを削除
//}//それ以外は
else {
if (!$(".hide-btn").length) {
//サイト表示時にDownMoveクラスを一瞬付与させないためのクラス付け。hide-btnがなければ下記の動作を行う
$("#page-top").addClass("DownMove"); //DownMoveをクラス追加
$("#page-top").removeClass("UpMove"); //UpMoveを削除
}
}
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
setFadeElement(); /* スクロールした際の動きの関数を呼ぶ*/
});
// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on("load", function () {
setFadeElement(); /* スクロールした際の動きの関数を呼ぶ*/
});
// #page-topをクリックした際の設定
$("#page-top").click(function () {
$("body,html").animate(
{
scrollTop: 0 //ページトップまでスクロール
},
500);
//ページトップスクロールの速さ。数字が大きいほど遅くなる
return false; //リンク自体の無効化
});
//# sourceURL=pen.js</script>
</body>
</html>