jQueryが特徴的なホームページ完成（荒川区：広告会社）
2023/12/31
１ 完成ホームページ
※以下の会社名でホームページに飛びます。
２ 制作期間
約3カ月 100時間程度
３ トップページメニュー
TOP、PR動画、ご提案（①ホテル・ホール・イベント関係、②店舗・その他）、当社とは、問い合わせ
４ 訴求ポイント
「setTimeout」という、Jqueryの関数（アニメーション）を使ったことです。この「setTimeout」のポイントは、CSSのアニメーションでは表現できない、文字を消えた状況から出現させ、また消えるという動きを２つのclass（blurとnonblur）を使って表現できること です。
事業社様のご要望は、一番訴求したい言葉「心を動かす」、「街を動かす」、「TOTAL SIGN」、「広告宣伝株式会社」という文字をゆっくりとブラーをかけながら、時間差で出現できるようにして欲しいというもので、動画で使うテクニックのようなものをＪqueryで表現しました。
①ホテル・ホール・イベント関係、②店舗・その他の２つのページにも、CSSアニメーションを設定しました。
５ 実際のソースコード
（１）html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta
name="description"
content="書籍「動くWebデザインアイディア帳」のサンプルサイトです"
/>
<meta name="robots" content="noindex,nofollow" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!--=============Google Font ===============-->
<link
href="https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap"
rel="stylesheet"
/>
<!--自作のCSS-->
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<script>
(function (d) {
var config = {
kitId: "lws0yvw",
scriptTimeout: 3000,
async: true,
},
h = d.documentElement,
t = setTimeout(function () {
h.className =
h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
}, config.scriptTimeout),
tk = d.createElement("script"),
f = false,
s = d.getElementsByTagName("script")[0],
a;
h.className += " wf-loading";
tk.src = "https://use.typekit.net/" + config.kitId + ".js";
tk.async = true;
tk.onload = tk.onreadystatechange = function () {
a = this.readyState;
if (f || (a && a != "complete" && a != "loaded")) return;
f = true;
clearTimeout(t);
try {
Typekit.load(config);
} catch (e) {}
};
s.parentNode.insertBefore(tk, s);
})(document);
</script>
</head>
<body>
<div id="gazou-wide">
<div style="position: relative">
<div style="z-index: 100; top: 12em; width: 100%" class="gazou-shin">
<section id="lead" class="blurTrigger" style="position: relative">
<div class="lead-desc">
<p class="lead-desc-1">
<span style="color: #cc19ff"
class="lead-desc-bold">心</span>を動かす
</p>
</div>
</section>
<section id="lead" class="blurTrigger1" style="position: relative">
<div class="lead-desc">
<p class="lead-desc-1">
<span style="color: #ff7f00" class="lead-desc-bold">街</span>を動かす
</p>
</div>
</section>
<section id="lead" class="blurTrigger2" style="position: relative">
<div class="lead-desc">
<p class="lead-desc-1">
<span style="color: green" class="lead-desc-bold">TOTAL SIGN</span>
</p>
</div>
</section>
<section id="lead" class="blurTrigger3" style="position: relative">
<div class="lead-desc">
<p class="lead-desc-1 lead-desc-bold">広告宣伝株式会社</p>
</div>
</section>
</div>
</div>
</div>
<!--=============JS ===============-->
<!--jQuery-->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!--機能編 6-1-2 フェードイン・アウトさせて全画面で見せる-->
<!--印象編 9-4-1 SVG アニメーション-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js"></script>
<!--自作のJS-->
<script src="js/script.js"></script>
</body>
</html>（２）CSS
/* lead */
p {
font-size: 100%;
margin: 0;
outline: 0 none;
padding: 0;
}
#lead {
position: relative;
display: flex;
justify-content: center;
}
/* 一文字目はカラーで太字 */
#lead .lead-desc-bold {
font-family: a-otf-jun-pro, sans-serif !important;
font-weight: 600 !important;
}
#lead .lead-desc {
font-size: 2em;
}
#lead .lead-desc p {
font-family: a-otf-jun-pro, sans-serif !important;
font-style: normal !important;
color: #565656;
letter-spacing: 0.1em;
line-height: 1;
text-align: center;
}
/* 背景画像の挿入 */
@media screen and (min-width: 960px) {
.gazou-shin {
background-image: url("https://web-shindanshi.com/wp-content/uploads/2022/09/sora.jpg");
background-size: cover;
padding: 2em 0 2em 0;
}
}
@media screen and (max-width: 960px) {
.gazou-shin {
height: 80vw;
background-image: url("https://web-shindanshi.com/wp-content/uploads/2022/09/soratate-1.jpg");
background-size: cover;
padding: 2em 0 0em 0;
}
}
/* 文字全部に白いシャドーを入れる */
.lead-desc-1 {
text-shadow: 0px 0px 10px #ffffff;
}
@media screen and (min-width: 960px) {
.lead-desc-1 {
font-size: 3em !important;
}
}
@media screen and (max-width: 960px) {
.lead-desc-1 {
font-size: 8vw;
}
}
@media screen and (max-width: 960px) {
#lead .lead-desc p {
font-family: a-otf-jun-pro, sans-serif !important;
font-style: normal !important;
color: #565656;
letter-spacing: 0.1em;
line-height: 2;
}
}
/* 以下ブラー（blur）のアニメーション blur（.class）のアニメーションネーム（bluerAnime）等の定義 1秒で終わるよ等*/
.blur {
animation-name: blurAnime;
animation-duration: 1s;
animation-fill-mode: forwards;
}
/* notblur（.class）のアニメーションの定義 1秒で終わるよ等 */
.notblur {
animation-name: notblurAnime;
animation-duration: 1s;
animation-fill-mode: forwards;
}
/* blurAnimeの具体的動きの定義 */
@keyframes blurAnime {
from {
filter: blur(10px);
transform: scale(1.02);
opacity: 0;
}
to {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
}
/* notblurAnimeの具体的動きの定義 */
@keyframes notblurAnime {
from {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
to {
filter: blur(10px);
transform: scale(1.02);
opacity: 0;
}
}
/* 各文字の初期値は見えないのでopacity０ */
.blurTrigger {
opacity: 0;
}
.blurTrigger1 {
opacity: 0;
}
.blurTrigger2 {
opacity: 0;
}
.blurTrigger3 {
opacity: 0;
}（３）Jquery
function fadeAnime() {
$(".blurTrigger").addClass("blur"); // 画面内に入ったらblurというクラス名を追記
setTimeout(function () {
$(".blurTrigger").addClass("notblur");
}, 1000);
setTimeout(function () {
$(".blurTrigger1").addClass("blur");
}, 2000);
setTimeout(function () {
$(".blurTrigger1").addClass("notblur");
}, 3000);
setTimeout(function () {
$(".blurTrigger2").addClass("blur");
}, 4000);
setTimeout(function () {
$(".blurTrigger2").addClass("notblur");
}, 5000);
setTimeout(function () {
$(".blurTrigger3").addClass("blur");
}, 6000);
setTimeout(function () {
$(".blurTrigger3").addClass("notblur");
}, 7000);
// 最後に出てくる
setTimeout(function () {
$(".blurTrigger").removeClass("blur notblur");
$(".blurTrigger").addClass("blur");
}, 8000);
setTimeout(function () {
$(".blurTrigger1").removeClass("blur notblur");
$(".blurTrigger1").addClass("blur");
}, 8000);
setTimeout(function () {
$(".blurTrigger2").removeClass("blur notblur");
$(".blurTrigger2").addClass("blur");
}, 8000);
setTimeout(function () {
$(".blurTrigger3").removeClass("blur notblur");
$(".blurTrigger3").addClass("blur");
}, 8000);
}
fadeAnime();（４）実際の動き（コードペン）
See the Pen
by 佐久間 俊雄 (@zojydusc)
on CodePen.
６ その他、難しかったポイント
同社のサイトは、以前のサイト制作から１０年以上は経っていると思われ、HTMLが最新のHTML５で出来ておらず、必要なhtmlプログラムをHTML５に修正するのが大変でした。・サーバーも現在メジャーなサーバーではなく（株式会社NTTPCコミュニケーションズのwebＡrenaというwebサーバー）WordPressの簡単インストールが使えない ので、一からアップロードする必要がありました。また、サーバー側にローカルからアップロードする際や、Web上からダウンロードする際に、何か許可制限があるようでZIPファイルをアップロードできなかったり、プラグインを自由にダウンロードできない等が生じました。
７ まとめ
いずれにしても、ご要望どおり、イメージ通り完成できて良かったです。年内は後１事業者様のサイトに取り組ませていただきます。
