HTML・CSS JQuery ホームページ制作

jQueryが特徴的なホームページ完成(荒川区:広告会社)

2023/12/31

1 完成ホームページ 

※以下の会社名でホームページに飛びます。

広告宣伝株式会社様(サインや看板制作会社)

2 制作期間

約3カ月 100時間程度

3 トップページメニュー

TOP、PR動画、ご提案(①ホテル・ホール・イベント関係、②店舗・その他)、当社とは、問い合わせ

4 訴求ポイント

「setTimeout」という、Jqueryの関数(アニメーション)を使ったことです。この「setTimeout」のポイントは、CSSのアニメーションでは表現できない、文字を消えた状況から出現させ、また消えるという動きを2つのclass(blurとnonblur)を使って表現できること です。
事業社様のご要望は、一番訴求したい言葉「心を動かす」、「街を動かす」、「TOTAL SIGN」、「広告宣伝株式会社」という文字をゆっくりとブラーをかけながら、時間差で出現できるようにして欲しいというもので、動画で使うテクニックのようなものをJqueryで表現しました。
①ホテル・ホール・イベント関係、②店舗・その他の2つのページにも、CSSアニメーションを設定しました。

5 実際のソースコード

(1)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>

(2)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;
  }
}
/* 各文字の初期値は見えないのでopacity0 */
.blurTrigger {
  opacity: 0;
}
.blurTrigger1 {
  opacity: 0;
}
.blurTrigger2 {
  opacity: 0;
}
.blurTrigger3 {
  opacity: 0;
}

(3)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();

(4)実際の動き(コードペン)

See the Pen
by 佐久間 俊雄 (@zojydusc)
on CodePen.

6 その他、難しかったポイント

同社のサイトは、以前のサイト制作から10年以上は経っていると思われ、HTMLが最新のHTML5で出来ておらず、必要なhtmlプログラムをHTML5に修正するのが大変でした。・サーバーも現在メジャーなサーバーではなく(株式会社NTTPCコミュニケーションズのwebArenaというwebサーバー)WordPressの簡単インストールが使えない ので、一からアップロードする必要がありました。また、サーバー側にローカルからアップロードする際や、Web上からダウンロードする際に、何か許可制限があるようでZIPファイルをアップロードできなかったり、プラグインを自由にダウンロードできない等が生じました。

7 まとめ

いずれにしても、ご要望どおり、イメージ通り完成できて良かったです。年内は後1事業者様のサイトに取り組ませていただきます。

JQuery set timeout 関数 

-HTML・CSS, JQuery, ホームページ制作