LPコーディングで使用した「jQuery」

先日、クラウドワークスの「XDデータからのLPコーディング案件」に応募したところ、ありがたいことに、ご依頼いただけました。

納品完了したので、今回使用した技術について書いていきます。長くなりそうなので、今回は、jQueryに絞って書いていきます。

ページスクロール

ナビゲーションをクリックしたときに、特定のセクションに飛ぶようにしました。

$(function () {
  $('a[href*="#"]').click(function () {
    var elmHash = $(this).attr('href');
    var pos = $(elmHash).offset().top - 70;
    $('body,html').animate({ scrollTop: pos }, 500);
    return false;
  });
})

「aタグをクリックしたら、変数elmHashにhref属性を代入して、変数posにemlhashのY座標から70px上の値を代入し、全体を500ミリ秒でposの分だけスクロールさせる」という意味です。

70pxはヘッダーを考慮した分です。

例えば、以下のリンクをクリックすると、

<nav>
 <ul>
  <li><a href="#about">〇〇について</a></li>
  //省略
 </ul>
</nav>

aboutというidを持ったセクション付近にゆっくりとスクロールします。

<section class="about" id="about">
  //省略
</section>

ページスクロールに関しては、こちらのページで分かりやすく解説されています。

画像スライダー

ライブラリのslickを使用しました。

slickの基本的な使い方については、省略します。(こちらのページで分かりやすく解説されていました)

ドットを表示させ、矢印は非表示、自動再生ONで設定しました。自動再生のスピードと切り替わるタイミングも指定しました。

  $(".slider").slick({
    dots: true,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 800,
  });

以下のsliderに対して、jQueryの記述を書きました。

<ul class="slider">
 <li>
  <picture>
   <source type="image/webp" srcset="img/main-visual/mv.webp" />
   <img src="img/main-visual/mv.png" alt="メインビジュアル" />
  </picture>
 </li>

 // 以下省略(li要素がスライドの数だけ繰り返されます)
</ul>

今回、画像形式にwebp(ウェッピー)を使用したため、picture要素で囲ってあります。webpの使用方法については、こちらのページが参考になります。

スマホハンバーガーメニュー

ハンバーガーメニューは、スマホの画面幅に収まりきらなくなったナビゲーションメニューを表示させるときに便利です。

以下のjQueryを記述しました。

$(function () {
    $(".openbtn").click(function () {
    $(this).toggleClass('active');
        $(".sp-nav").toggleClass('panelactive');
    });

    $(".sp-nav a").click(function () {
        $(".openbtn").removeClass('active');
        $(".sp-nav").removeClass('panelactive');
    });
})

ハンバーガーメニューのボタンには、openbtnというクラスを付けました。

<div class="openbtn"><span></span><span></span><span></span></div>

ナビゲーション部分には、sp-navというクラスを付けました。

<nav class="sp-nav">
 <ul>
  <a class="sp-nav__top" href="index.html">
   <li>
    トップページ
   </li>
  </a>

  //省略
  </ul>

 //省略
</nav>

ボタンをクリックすると、activeというクラスが付きます。すると、ボタンの見た目がハンバーガーだったのが、ばつ印に変化します。

以下のCSSでこの見た目を実現しました。(省略部分あり。こちらのページが参考になります。)

.openbtn {
  position: fixed;
  top: 27px;
  right: 5px;
}

.openbtn span {
    &:nth-of-type(1) {
      top: 20px;
    }

    &:nth-of-type(2) {
      top: 31px;
    }

    &:nth-of-type(3) {
      top: 42px;
    }

}

.openbtn.active span {
    &:nth-of-type(1) {
      top: 24px;
      transform: translateY(6px) rotate(-45deg);
    }

    &:nth-of-type(2) {
      opacity: 0;
    }

    &:nth-of-type(3) {
      top: 36px;
      transform: translateY(-6px) rotate(45deg);
    }
}

ナビゲーション部分は、もともと画面上部の外側に隠れています。panelactiveというクラスが付くと、topの位置が下に下がることで、メニュー部分が表示されます。

以下のCSSで実現できます(省略部分あり)

.sp-nav {
  position: fixed;
  top: -120%;
  transition: all 0.6s;
}

sp-nav.panelactive {
  top: 0;
}

次回

次回は、sassについて書いていきたいと思います。