<!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 {
position: fixed;
right: 10px;
bottom: 30px;
z-index: 2;
/*はじめは非表示*/
opacity: 0;
transform: translateY(150px);
}
/* 上に上がる動き */
#page-top.UpMove {
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
from {
opacity: 0;
transform: translateY(150px);
}
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(150px);
}
}
/*画像の切り替えと動き*/
#page-top a {
/*aタグの形状*/
display: block;
width: 100px;
height: 100px;
color: #333;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-size: 0.6rem;
/*背景画像の指定*/
background: url("/wp-content/uploads/demos/_assets/webnavi1.png") no-repeat
center;
background-size: contain;
}
#page-top.floatAnime a {
width: 100px;
height: 130px;
/*背景画像の指定*/
background: url("/wp-content/uploads/demos/_assets/webnavi2.png") no-repeat
center;
background-size: contain;
/*アニメーションの指定*/
animation: floatAnime 1s linear infinite;
opacity: 0;
}
@keyframes floatAnime {
0% {
transform: translateX(0);
opacity: 0;
}
25% {
transform: translateX(-10px);
opacity: 1;
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(10px);
opacity: 1;
}
}
/*Page Topと書かれたテキストの位置*/
#page-top span {
position: absolute;
bottom: -20px;
right: 20px;
color: #666;
}
/*========= レイアウトのための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 {
background: #333;
position: relative;
z-index: 2;
padding: 100px 20px;
}
.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>クリックすると「SCROLL」のアイコンリンクに変わり<br>トップに移動する<br>↓ ↓ ↓</p>
<main>
<section>
<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>
<h2>名言 3</h2>
<p>いつか、必ず、チャンスの順番が来ると信じなさい</p>
<p>前向きにもがき苦しむ経験は、すぐに結果に結びつかなくても、必ず自分の生きる力になっていく</p>
<p>「ゴールは遠いなぁ」と、がっかりするのも道のりです</p>
<p>「負けたことがある」というのが いつか 大きな財産になる</p>
<!--/area3-->
</section>
<section>
<h2>名言 4</h2>
<p>前進できぬ駒はない</p>
<p>「仕事はナメてかかって、真面目にやれ」と思っている。俺は、どの仕事もそうしてきているんです</p>
<p>自分を少し抑えて、肩の力を抜けば、仕事は長続きする</p>
<p>常に今日は明日の準備ですからね。今日やったことは必ず明日に返ってくるんです</p>
<!--/area4-->
</section>
<section>
<h2>名言 5</h2>
<p>強い者が勝つのではない。勝った者が強いのだ</p>
<p>自分がわかっていないことがわかるということが一番賢いんです</p>
<p>成功の反対は失敗ではなく「やらないこと」だ</p>
<p>自分が幸せかどうかは、自分で決めるしかないのよ</p>
<!--/area5-->
</section>
<!--/main-->
</main>
<footer id="footer">
<p id="page-top">
<a href="#">
<span>Page Top</span>
</a>
</p>
<small>© copyright.</small>
</footer>
<script>//スクロールした際の動きを関数でまとめる
function PageTopAnime() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
//上から100pxスクロールしたら
$("#page-top").removeClass("DownMove"); //#page-topについているDownMoveというクラス名を除く
$("#page-top").addClass("UpMove"); //#page-topについているUpMoveというクラス名を付与
} else {
if ($("#page-top").hasClass("UpMove")) {
//すでに#page-topにUpMoveというクラス名がついていたら
$("#page-top").removeClass("UpMove"); //UpMoveというクラス名を除き
$("#page-top").addClass("DownMove"); //DownMoveというクラス名を#page-topに付与
}
}
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
PageTopAnime(); /* スクロールした際の動きの関数を呼ぶ*/
});
// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on("load", function () {
PageTopAnime(); /* スクロールした際の動きの関数を呼ぶ*/
});
// #page-topをクリックした際の設定
$("#page-top").click(function () {
var scroll = $(window).scrollTop(); //スクロール値を取得
if (scroll > 0) {
$(this).addClass("floatAnime"); //クリックしたらfloatAnimeというクラス名が付与
$("body,html").animate(
{
scrollTop: 0 },
2000,
function () {
//スクロールの速さ。数字が大きくなるほど遅くなる
$("#page-top").removeClass("floatAnime"); //上までスクロールしたらfloatAnimeというクラス名を除く
});
}
return false; //リンク自体の無効化
});
//# sourceURL=pen.js</script>
</body>
</html>