カテゴリ jquery

当サイトはアフィリエイト広告を使用しています

模写コーディングしたページに動きを付けよう！【jQuery実践】

jQueryの実践として、以前の模写コーディングで作成したページに動きを付けます。

前回までの記事で、jQueryの入門編と称して紹介をしてきました。

今回は、模写コーディングの記事でやり残した、動的な部分の実装をjQueryを用いて実装していきます。

今回の記事は、模写コーディング記事の続編になります。

jQuery入門編も是非ご覧ください！

このシリーズで紹介しているページの完成品はこちらで公開しています。

事前準備

jQueryによる動的な部分を実装するためにの事前準備をしていきましょう。

まずは、以前までの記事で作成してきたフォルダに、スクリプトを記述するjs/script.jsを作ります。

のちほどスライドショーも実装するので、スライドに使用する画像もimageフォルダに入れておきます。

以下のようなファイル構成になります。

sample/
  ├ index.html
  ├ css/
  │  ├ style.css
  │  └ reset.css
  ├ js/  │  └ script.js  └ image/
     ├ hero_image.png
     ├ service_code.png
     ├ service_wordpress.png
     ├ service_responsive.png
     └ portfolio_img_new-trade.png

次に、index.htmlにて、実装に必要な以下のライブラリと、先ほどのjs/script.jsを読込む記述をします。

  • jQuery
  • slick (cssも含む)
  • Scroll Reveal

各種の必要なライブラリの取得方法は以下の記事で紹介しています。

index.htmlをエディタで開き、上記で取得した<script>コードと、js/script.jsの読込を纏めて<head>内に記述してしまいましょう。

この際、以下の点に注意です。

  • <head>内に記述するので、取得した<script>要素にはdefer属性を指定する。
  • slickのライブラリはjQueryを使用しているのでjQueryを先に読込む。
  • 全てのライブラリを読込後に、js/script.jsを読込む。
<head>
  ...
  <!-- slick用のcss -->
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />

  <!-- jquery -->
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous" defer></script>

  <!-- slick -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" defer></script>

  <!-- scroll reveal -->
  <script src="https://unpkg.com/scrollreveal" defer></script>

  <!--  スクリプト  -->
  <script src="./js/index.js" defer></script>
</head>

最後にjQueryの使用準備をしましょう。

script.jsをエディタで開き、以下を記述します。

$(function(){
  // HTML読込完了時に実行
})

これで一旦準備完了です。

ハンバーガーメニューを実装

以前の記事で、ハンバーガーメニューボタンとナビゲーションメニューの設置、CSSの記述は完了し、クラスを付け外しするだけでOKなところまで行っていました。

後はjQueryにてクラスを付け外しする処理を記述すればOKです。

ハンバーガーメニュー<button class="menu-btn">をクリックする度に、自分自身とナビゲーションメニュー<nav class="header_nav">にopenクラスを付け外しするようにしましょう。

script.jsに以下の記述を追加します。

$(function(){
  // ★ハンバーガーメニュー  $(".menu-btn").click(function () {    // ハンバーガーメニューボタンとナビゲーションメニューに    // 同時にopenクラスを付けたり外したりする    $(this).toggleClass("open");    $(".header_nav").toggleClass("open");  });})

スムーススクロールを実装

ナビゲーションメニューに以下のようなスムーススクロールを実装します。

スムーススクロール

ナビゲーションメニューの<a>要素には既に各セクションへのIDがhref属性に指定されています。

ナビゲーションのhref

これを元に、jQueryでスクロール先となる各セクションの位置を特定し、スムーススクロールを実装しましょう。

script.jsに以下を追加します。

$(function(){
  // ハンバーガーメニュー用のコード(省略)
  ...  
  
  // ★スムーススクロール  $('a[href^="#"]').click(function () {    // ハンバーガーメニューを閉じる    $(".menu-btn").removeClass("open");    $(".header_nav").removeClass("open");    // 各aタグに指定されたhref属性を取得する    var href = $(this).attr("href");    // href属性で指定された要素(各section要素)をセレクタで指定し、位置を取得する    // ※offset()メソッドはtop,leftをプロパティに持つオブジェクトを返す    var pos = $(href).offset().top;    // 取得した位置へ1秒でアニメーションスクロールする    $("body,html").animate({ scrollTop: pos }, 500);    // aタグのデフォルト動作(画面遷移)を取り消す    return false;  });})

TOPへ戻るボタンの実装

ある程度スクロールしたらボタンがフェードインしてくるトップへ戻るボタンを実装します。

topへ戻る

トップへ戻るボタンはまだボタンの設置・装飾もしていない状態です。

先の画像のように、ウィンドウ右下にposition: fixed;で配置します。

まずはindex.htmlにトップへ戻るボタンを記述します。

position: fixed;で配置するのでどこに要素を配置してもいいですが、なるべく他の要素の邪魔にならず、画面の下の方にあるので、<body>の閉じタグの直前に入れます。

  ...
  他の各要素
  ...
  <div class="go-top">TOP</div>
</body>

次にstyle.cssに、トップへ戻るボタンのスタイルを以下のように追加します。

スタイルのポイントは以下です。

  • 先の通り、position: fixed;で配置する
  • 初期状態ではcssにて非表示として、jQuery側でスクロールしたら出てくるようにする
  • border-radius: 50%;にて円形にする
  • 疑似要素で上矢印を表示する
/* トップへもどるボタン */
.go-top {
  display: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ffcd6b;
  position: fixed;
  bottom: 50px;
  right: 50px;
  text-align: center;
  padding-top: 20px;
  cursor: pointer;
}

/* 上向きの矢印 */
.go-top::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 3px solid black;
  border-left: 3px solid black;
  position: absolute;
  top: 10px;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
}

@media screen and (max-width: 768px) {
  /* レスポンシブ時のスタイル */
  .go-top {
    bottom: 5vw;
    right: 5vw;
  }
}

最後にscript.jsにて、TOPへ戻る処理と、スクロールしたらフェードインする処理を追加します。

$(function(){
  // ハンバーガーメニュー用のコード(省略)
  // スムーススクロール用のコード(省略)
  ...
  
  // ★topへ戻るボタンにクリックイベントを指定  $(".go-top").click(function () {    // <html>,<body>要素を1秒間のアニメーションしながらTOP位置へスクロール    $("html,body").animate({ scrollTop: 0 }, 500);  });  // ★windowにスクロールイベントを指定  $(window).scroll(function () {    if ($(this).scrollTop() > 300) {      // windowのスクロール位置を取得し、100pxを超えたらTOPへ戻るボタンを表示      $(".go-top").fadeIn();    } else {      // windowのスクロール位置が100pxを超えなければTOPへ戻るボタンを非表示      $(".go-top").fadeOut();    }  });})

slickでスライドショーを実装

制作事例画像を、slickを使ってスライドショーにします。

slick

以前の記事では触れていない箇所でしたので、イチからの実装になります。

要素のレイアウトとしては下の画像のような感じで実装します。

スライド

一つ一つのスライドの構成は、制作事例の画像とキャプションを付け加えたものとなり、周りに前後スライドへの矢印・ドットナビゲーションがあります。

まずはindex.htmlにて、スライドにする要素を並べ、外側をブロック要素で囲いましょう。

先の通り、一つ一つのスライドは、画像＋キャプションとするので、要素としてはfigure>(img+figcaption)とします。

矢印・ドットナビはslick側で自動で生成してくれるのでここでは不要です。

...
<section class="portfolio" id="portfolio">
  <div class="wrapper">
    <h2 class="title2">PORTFOLIO</h2>
    <p class="portfolio_txt">WEBサイト制作事例、ランディングページやコーポレートサイトの模写等を掲載しています。</p>
    <div class="portfolio_slick">      <figure>        <img src="./image/portfolio_img_new-trade.png" alt="株式会社ニュートレード社様">        <figcaption>【制作事例】株式会社ニュートレード社様 WEBサイト</figcaption>      </figure>      <figure>        <img src="./image/portfolio_img_new-trade.png" alt="株式会社ニュートレード社様">        <figcaption>【制作事例】株式会社ニュートレード社様 WEBサイト</figcaption>      </figure>      <figure>        <img src="./image/portfolio_img_new-trade.png" alt="株式会社ニュートレード社様">        <figcaption>【制作事例】株式会社ニュートレード社様 WEBサイト</figcaption>      </figure>          </div>    <div class="portfolio_btn"><a>制作物の一覧はこちら</a></div>
  </div>
</section>
...

次にstyle.cssは以下のように記述します。

先に指定したスライドの他、slickにて自動で生成される前後矢印とドットナビのスタイルも記述しています。

各クラス名は以下の通りです。

  • 矢印共通のクラスとして.slide-arrow
  • 前への矢印は.slide-prev
  • 次への矢印は.slide-next
  • ドットナビは.slide-dots

※ドットナビはul.slide-dots>(li>button)*スライド数のような構成になります

...
.portfolio {
  padding: 50px 0;
}
.portfolio_txt {
  margin-bottom: 20px;
}
.portfolio_btn {
  width: 200px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 5px;
  background-color: rgb(255, 207, 101);
  text-align: center;
}

/* スライダーのコンテナスタイル */
.portfolio_slick {
  width: 90%;
  max-width: 900px;
  margin: 0 auto 50px;
}

/* ひとつひとつのスライドのスタイル */
.portfolio_slick figure {
  margin: 0 20px;
}
.portfolio_slick figure figcaption {
  margin-top: 20px;
  text-align: center;
}

/* 矢印共通のスタイル */
.portfolio_slick .slide-arrow {
  width: 20px;
  height: 20px;
  transition: transform 0.3s;
  position: absolute;
  top: 45%;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
}
/* 前へ矢印のスタイル */
.portfolio_slick .slide-prev {
  border-top: 3px solid #888;
  border-left: 3px solid #888;
  transform: rotate(-45deg);
  left: -25px;
}
/* 次へ矢印のスタイル */
.portfolio_slick .slide-next {
  border-top: 3px solid #888;
  border-right: 3px solid #888;
  transform: rotate(45deg);
  right: -25px;
}

/* ドットナビゲーションのスタイル */
.slide-dots {
  width: 100%;
  padding-top: 10px;
  text-align: center;
  list-style: none;
}
/* ドットナビゲーションの一つ一つのスタイル */
.slide-dots li {
  display: inline-block;
  margin: 0 10px;
  text-align: center;
}
.slide-dots li button {
  border: 0;
  background: 0;
  font-size: 0;
  color: transparent;
  cursor: pointer;
}
.slide-dots li button::before {
  content: "☆";
  font-size: 16px;
  color: black;
}
/* アクティブ状態のドットナビのスタイル */
.slide-dots li.slick-active button::before {
  content: "★";
}

@media screen and (max-width: 768px) {
  .portfolio {
    padding: 10vw 0;
  }
  .portfolio_txt {
    font-size: 4vw;
    margin-bottom: 6vw;
  }

  /* スライダーのコンテナスタイル */
  .portfolio_slick {
    width: 100%;
  }
  /* ひとつひとつのスライドのスタイル */
  .portfolio_slick figure {
    width: 80vw;
  }

  .portfolio_btn {
    width: 35vw;
    font-size: 3vw;
  }
}

最後にjQueryからslickを実行する処理を記述します。

ここでオプションに前後スライドへの矢印要素と、ドットナビのクラスを記述します。

また、画面幅が小さくなったときには矢印、ドットナビを消すように指定します。

$(function(){
  // ハンバーガーメニュー用のコード(省略)
  // スムーススクロール用のコード(省略)
  // topへ戻るようのコード(省略)
  ...
  
  // ★slick  $('.portfolio_slick').slick({    autoplay: true, // 自動再生を有効にする    autoplaySpeed: 3500, // 次のスライドへ移るまでの時間    arrows: true, // 前後の矢印を有効にする    prevArrow: "<button class='slide-arrow slide-prev'></button>", // 前へボタン    nextArrow: "<button class='slide-arrow slide-next'></button>", // 次へボタン    centerMode: true, // スライドを中央に表示する    dots: true, // ドットナビゲーションを有効にする    dotsClass: "slide-dots", // ドットナビのクラス名を指定    speed: 500, // スライドの移動にかかる時間    responsive: [      // レスポンシブスタイルを指定      {        // 画面幅768px以下は、settingsプロパティ内のオプションに変更        breakpoint: 769,        settings: {          arrows: false, // 矢印を消す          centerMode: false, // センターモードをやめる          dots: false // ドットナビを消す        }      }    ]  });  
})

Scroll Revealの実装

スクロールしたら、コンテンツがふわっと表示されるようにします。

ふわっと表示

表示のオプションはとりあえず全て統一で行うので、ふわっと表示したい要素に共通のクラス名をつけましょう。ここではクラス名をreveal-itemとします。

index.htmlにて、以下のようにクラスを追加していきます。
※下記は一部のみ抜粋しています。

  <section class="service" id="service">
    <div class="wrapper">
      <h2 class="title2">SERVICE</h2>
      <p class="service_txt">以下のサービスをご提供します！</p>
      <div class="service_wrap">
        <div class="service_card reveal-item">          <h3 class="service_cttl">コーディング</h3>
          ...
        </div>
        <div class="service_card reveal-item">          <h3 class="service_cttl">WordPress移行</h3>
          ...
        </div>
        <div class="service_card reveal-item">          <h3 class="service_cttl">レスポンシブ化</h3>
          ...
        </div>
      </div>
    </div>
  </section>

後は.reveal-itemをセレクタとして、ScrollRevealを実行するのみです。但し、画像の読込が終わってから実行したいのでwindow.onloadイベントを使用します。

script.jsに以下を追加します。

$(function(){
  // ハンバーガーメニュー用のコード(省略)
  // スムーススクロール用のコード(省略)
  // topへ戻るようのコード(省略)
  // slick用のコード(省略)
})

$(window).load(() => {  // ★スクロールしたらふわっと表示  ScrollReveal().reveal('.reveal-item', {    origin: 'top', // 上から表示    distance: '50px', // 開始距離は50px離れたところから    duration: 700, // アニメーションを700ミリ秒に指定    interval: 300, // アニメーションが連続する際の間隔を300ミリ秒指定    easing: 'ease-out', // アニメーション効果を指定  });});

まとめ

この記事で、ようやく模写コーディングが完成となりました。

jQueryの実装はコーディング量としては比較的少ないですが、文法や、前提となるHTML、CSSの知識がしっかりと身についていなければ難しいかもしれません。

何度も模写を繰り返して少しずつレベルアップしていきましょう！