株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

WEBサイト制作講座 | 動きのあるページ制作1「にゅるっとメニュー」

2017.11.20

CATEGORY - web

今回から、ちょっとした動きのあるページ制作に入っていきたいと思います。

前回、JavaScript基礎をやったのですが、ほんとかじっただけなので、JavaScriptに関してもっと詳しく学びたい方は、↓↓ここらへんのサイトがよくまとまっててわかりやすいです^^

リズムファクトリーさんのJavaScript講座

この講座のゴールは、ちょっとした動きのあるページを作ることなので、JavaScriptの文法とかについて一個一個説明するのは省略しますね笑
※おそらく、上記のサイトとか他のサイトとかで調べてもらえればわかることなのでw

ただ、作っていく過程で使用した文法なや考え方などについては説明していきますので、こんな感じで作れるんだなって思ってもらって、楽しんでもらえれば本望です^^

「にゅるっとメニュー」で作成する完成版のファイルはこちらからダウンロードできます↓↓

にゅるっとメニュー 完成版ファイル

 

では、1つ1つ、前回までに作ったページに動きを付けていきたいと思います。

動きのあるページ制作

1. jQuery について

この講座では、jQuery という、JavaScript のライブラリを使っていきたいと思います。
WEBデザインに興味のある方なら、聞いたことはあるのではないでしょうか^^

実際、現場とかの制作の過程でも、こういった、ライブラリをちょくちょく使うことになると思います。
こういったライブラリ自体も中身はJavaScriptで書かれています。

ただ、オリジナルのJavaScriptだと、複雑に書かないといけなかったりする処理を簡潔に書けるようにまとめてくれたのが、こういったライブラリです。

なので、基本的に考え方は一緒です^^

それではまず、jQuery をページに読み込ませます。

jQuery のサイトから、ダウンロードしてきます。

jQuery

で、所定の場所に保存して、
(今回は、[assets]-[js]-[libs]フォルダの中に保存しました。)

HTMLの中で読み込ませて見ます。

<script src="assets/js/libs/jquery-3.2.1.min.js"></script>

※ </body> の上で読み込ませますね。

あと、実際に、書いていくjsファイルを読み込ませておきたいので、[app.js]という名前でファイルを保存して、こちらもHTMLの中で読み込ませておきます。

<script src="assets/js/libs/jquery-3.2.1.min.js"></script>
<script src="assets/js/app.js"></script>

※ jQuery ファイルの後で読み込まないと、jQuery が使えないので、注意してください。

いったん、これで準備が整ったので、次から1つ1つ、アニメーションをさせていきたいと思います^^

2. スクロールでにゅるっと出るメニュー

にゅるっと出るメニュー

こんなやつです。

スクロールさせて、ヘッダーメニューが見えなくなると、上から、メニューがにゅるっとでてくる感じです。

HTML側で、にゅるっとおりてくるメニューを書きます。

ヘッダーの下に、下記を追加しました。

<div class="swipe-menu" id="js-fixed-menu">
  <h1 class="logo-image">
    <img src="assets/images/common/logo.png" alt="モコランニング" width="100">
  </h1>
  <nav class="base-menu-wrapper">
    <ul class="base-menu-list">
      <li>
        <a href="#anc-about">
          ABOUT
        </a>
      </li>
      <li>
        <a href="#anc-chara">
          CHARACTOR
        </a>
      </li>
      <li>
        <a href="#anc-faq">
          FAQ
        </a>
      </li>
      <li>
        <a href="#anc-download">
          DOWNLOAD
        </a>
      </li>
    </ul>
  </nav>
</div>

基本的には、ヘッダーの中身と一緒で、それを、swipe-menu というクラスで囲みました。
で、そのDOMをJavaScriptで操作したいので、idをつけておきます。「id=”js-fixed-menu”」って部分ですね。

そういえば、id って初めてでてきましたねw

JavaScript で、DOMを操作するときに、どのDOMを操作するかをまずは指定しないといけません。

主なものが、

・タグを指定する
・クラスを指定する
・id を指定する

です。

タグとクラスはわかりますね。
クラスは、1つのHTMLの中で、同じクラスを何回も使っていいものになります。(複数のタグに指定できる)
それに比べて、id は、1つのHTMLの中で、1回しか使ってはいけません。(同じ id は2つない)

という感じです。(※なので、idをまた使いたいときは、別のid名にしないといけないです。)

ちなみに、JavaScriptで操作するためにつけたものは、「js-」とか、そういうプレフィックスをつけておくと、後々、わかりやすいです^^

CSSにも、追加しておきます。

swipe-menu のCSSを追加しましょう。

/* スワイプメニュー */
.swipe-menu {
  background: rgba(0, 113, 188, 0.8);
  width: 100%;
  padding: 5px;
  box-shadow: 0 2px 3px rgba(51,51,51,0.5);
  position: fixed;
  top: -200px;
  left: 0;
  z-index: 1;
}

position: fixed で、画面に対して、固定位置に表示させるようにしてます。
で、 top: -200px で、画面より上に表示させる(要は、画面から隠れる)ように、実装しておきます。

JavaScript 側を書いていきます。

はい、では、本題のJavaScript側を書いていきます。

考え方としては、こんな感じです^^

1. 画面自体、にゅるっとでてくるメニューのDOMを取得しておく。
2. 画面をスクロールして、一定のスクロールに達したら、メニューをにゅるっと表示させる。
3. 画面を反対にスクロール(上に。)して、ヘッダーが表示されたら、でてきたメニューを隠す。

ですかね。

実際の JavaScript がこちらです。

// window を格納
var $window = $(window);

// FIXEDメニュー
var $fixedMenu = $('#js-fixed-menu');
var isFixedMenu = false;

// スクロールイベント
$window.on('scroll', function(){
  if($(this).scrollTop() > 300) {
    if (!isFixedMenu) {
      isFixedMenu = true;
      $fixedMenu.animate({ top: '0' });
    }
  } else {
    if (isFixedMenu) {
      isFixedMenu = false;
      $fixedMenu.animate({ top: '-200' });
    }
  }
});

1つ1つ説明していきますね。

3-1 変数

JavaScript では、変数という概念があります。数学とかでやった、 x = 1 とか、あーゆー感じだと思ってもらえればと。
変数は、

「var 変数名 = 変数に入れるもの;」

って書きます。

一度、変数名を宣言しちゃえば、その後は、var なしで使えます。
ちなみに、変数は、上書きできるので、あとあと、別のものを入れちゃっても大丈夫です。
(※そのかわり、それまで入っていた値は消えちゃいますが^^;)

// window を格納
var $window = $(window);

// FIXEDメニュー
var $fixedMenu = $('#js-fixed-menu');
var isFixedMenu = false;

今回だと、まず、window(画面自体)を変数にいれてます。これのスクロール量をとるためですね。

ちなみに、jQuery を今回使っているので、画面とか、クラス名とか、タグとか、id の要素を取得するときは、

$(‘要素名’)

って感じで、取得します。

クラス名のときは、要素名の前に、ドット(.)を、id名のときは、要素名の前に、シャープ(#)をつけて取得します。

要素の他の変数として、

var isFixedMenu = false;

を追加しておきました。

false ?? って感じですかね。。。これ、ブール型といって、よく使うのですが、true or false で使い分けたいときに使います。

今回だと、にゅるっと出るメニューが表示されているときと表示されていないときに分けて操作したいので、これを設定しておきます。

初期表示だと、にゅるっと出るメニューは非表示の状態なので、 false にしてあります。

3-2 スクロールイベントと条件分岐とアニメーション

で、実際に操作するこの部分です。

// スクロールイベント
$window.on('scroll', function(){
  if($(this).scrollTop() > 300) {
    if (!isFixedMenu) {
      isFixedMenu = true;
      $fixedMenu.animate({ top: '0' });
    }
  } else {
    if (isFixedMenu) {
      isFixedMenu = false;
      $fixedMenu.animate({ top: '-200' });
    }
  }
});

3-2-1 jQuery 「.onメソッド」

jQuery で、よく使うのが、この onメソッドです。

書き方は、

jQueryで取得したオブジェクト.on('イベント名', function(){
  コールバック(イベントを行った後に動作させるもの)
});

といった感じで、書きます。

イベント名には、いろんなものがあって、よく使うのが、’click’とか’submit’とかですかね。
click は読んで字のごとく、特定の要素をクリックした時のことです。
submit はフォームの送信ボタンを押した時って感じです。

で、今回は、画面がスクロールした時に処理をしたいので、scroll を指定してます。
これで、スクロールすると、イベントが行われる(発火するってよくいいますw)ようになります。

次に、スクロールしたときになにをするかをコールバックの中に書いていきます。

3-2-2 条件分岐「if-else文」

コールバックの中の構造は、if文で条件分岐してます。

if文の書き方を今回の例で説明すると、

if( スクロールの量が一定の値を超えたとき ) {
  なにかする
} else {
  それ以外の時になにかする
  (※スクロールの量が一定の値よりすくないとき)
}

って感じです。

if文、直訳すると、「もし」なんで、まあ、だいたい直感でわかりますかね笑

今回、画面のスクロール量が 300 をこえたときに、にゅるっとメニューを表示して、300より小さいときに、にゅるっとメニューを非表示にしたいので、

if($(this).scrollTop() > 300) {
  // にゅるっとメニュー表示
} else {
  // にゅるっとメニュー非表示
}

にしてます。

ちなみに、$(this) なんですけど、自分自身のjQuery要素を表してます。

今回だと、$window のことで、画面自身を表してます。

このように、コールバックの中で、自分自身を使用することができます。

scrollTop() は決まりきった書き方で、スクロールした量を表します。

3-2-3 jQuery アニメーションメソッド

最後に、メニューをアニメーションさせたいと思います。

jQuery の animate メソッドを使用します。

最も簡単な書き方は、

jQueryで取得したオブジェクト.animate({ プロパティの変更点 });

って書きます。
どんなアニメーションにするかとか、どのくらいの速さでアニメーションをさせるかなど細かく設定できますが、詳しく知りたいかたは調べてみてください。

今回は、にゅるっとメニューのDOMの TOP の値を変更することでアニメーションさせています。

ちなみに、その時に、メニューが表示されていないときには、にゅるっとメニューの表示のアニメーションをさせて、メニューが表示されているときには、にゅるっとメニューの非表示のアニメーションをさせたいので、「isFixedMenu」のtrue/false を切り替えることでそこらへんの対応をしてます^^
(※ちょっと複雑ですかね。。。。)

はい、こんな感じで、にゅるっとメニューの表示ができたと思います。

次回はまた別のアニメーションについて解説していきますね。

今回のポイント

  1. jQueryなどのJavaScriptライブラリを使うことで格段に楽に実装ができるようになる!
  2. JavaScriptで操作するDOMのクラス名やid名には、「js-」などのプレフィックスをつけるとわかりやすい!
  3. JavaScriptのメソッド、jQueryのメソッドはほんといろいろあるので、いろいろ試してみてくださいw

 

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP