ウェブデザイン演習 第13回 - ウェブデザイン演習 | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザイン演習 第13回

今回も新しいデザインでコーディングを行います。
アンケートでスマホ・タブレット対応の次に票の多かった「スクロールアニメーション」です。

今回は簡単なスクロールアニメーションを実装することで、
どういった仕組みで動いているかを学んでいこうと思います。

この記事の目次

ウェブデザイン演習 第13回

コーディングの準備

今回も講義終了までに完成を目指しますが、
jQueryプラグインは使わずJavaScriptのコードを書いて、
簡単なスクロールアニメーションを実装してみましょう。

http://webcre8tor.com/data/lesson/anime/

※ID・PASSは講義にて

フォルダ・ファイルの準備

今回もまずHTMLファイルやCSSファイルなどの準備を行いましょう。

こちらのファイルも今後の講義で毎回使いますので、管理しやすく、データが消えないような場所にフォルダとファイルを作り、できればUSBメモリなど自分で持ち歩けるものにフォルダとファイルを保存して、講義の度に持ってきてもらうと安全です。

手順は以下です。

  1. 自分で管理できる場所にフォルダを作り、名前を「html_anime」にする。
  2. 「html_anime」フォルダの中にさらに「css」「js」「img」というフォルダを作る。
  3. Dreamweaverを開き、新規ファイルを作成。
    「index.html」という名前をつけて「html_anime」フォルダの直下に保存する。
  4. Dreamweaverで新規ファイルを作り、「main.css」という名前をつけて、
    「html_anime」フォルダの中の「css」フォルダの中に保存する。
  5. Dreamweaverで新規ファイルを作り、「anime.js」という名前をつけて、
    「html_anime」フォルダの中の「js」フォルダの中に保存する。

1・2 フォルダの作成

まずはじめにフォルダから作っていきましょう。

右クリックメニューから、新規作成 > フォルダー と進み「html_anime」と名前をつけてください。
作成された「html_anime」フォルダを開き、フォルダの中に「css」「js」「img」の3つのフォルダを再び作成して終わりです。

3・4 ・5ファイルの作成

次に、3の「index.htmlの作成」の説明をします。
まずDreamweaverを起動してください。

lesson03_dreamweaver01

起動して出てきたウィンドウの「HTML」をクリックして・・・

lesson03_dreamweaver02

そのまま「作成」ボタンをクリックすると・・・

lesson03_dreamweaver03

新規ドキュメントが立ち上がりますが、すでに10行ほどコードが記述されています。
この講義では記述を行いながら説明を行うので、ひとまずこちらのコードを削除して、
上部メニューから、ファイル > 保存 と進み、「index.html」と名前をつけて保存しましょう。

この時、保存先が先ほど作成した「html_anime」フォルダになるように注意してください。

4の「main.cssの作成」も同様に、新規ドキュメントが立ち上がったらコードを削除して、「main.css」と名前をつけて「html_anime」フォルダの中の「css」フォルダに保存します。

5の「anime.jsの作成」も、「anime.js」と名前をつけて「html_anime」フォルダの中の「js」フォルダに保存しましょう。

ファイル・フォルダ構成の確認

問題なくできていれば、以下の画像のようなフォルダ構成になっているはずです。

フォルダ・ファイル構成がもし違っていたら、
もう一度よく確認しながら手順を進めてください。

画像アセット

前回はWeb動画の実装とWebフォントの実装だったのでPhotoshopは使いませんでしたが、今回はスクロールアニメーションのコーディングですので、パーツを書き出す必要があります。久々に「画像アセット」で画像を書き出してみましょう。

PSDのダウンロード

まずはPSDファイルをダウンロードしておきましょう。
※IDとPASSは講義で伝えます。

http://webcre8tor.com/data/WebDesignExercise02.psd

ダウンロードが終わったらこのPSDデータを、
持参したUSBなど確実に管理できる場所に移動しておいてください。

Photoshopの基本設定

Photoshopの基本設定は度々行っているので今回は省略します。
基本設定に関しては以下の内容を確認してください。

使い方その1 レイヤーパネルを開く

まずレイヤーパネルを開いてみましょう。
今回は「雲」や「ufo」「地面」などと名前がついたフォルダがあります。 

使い方その2 レイヤーに拡張子付きの名前をつける

早速書き出す対象のフォルダ・レイヤーに名前をつけてみましょう。

雲の画像「cloud01.png」〜「cloud06.png」

レイヤーパネルに「雲」と名前の付いたフォルダがありますね。
その「雲」フォルダを開き、中のレイヤーを確認します。
そしてそれぞれ、

変更前「cloud01」「cloud02」「cloud03」「cloud04」「cloud05」「cloud06」

変更前「cloud01.png」「cloud02.png」「cloud03.png」「cloud04.png」「cloud05.png」「cloud06.png」

UFOの画像「ufo.png」

次にレイヤーパネルの「ufo」と名前の付いたフォルダの名前を変更します。

変更前「ufo」

変更後「ufo.png」

地面の画像「ground.png」

レイヤーパネルに「地面」と名前の付いたフォルダがありますが、
そのフォルダの中の「ground」と名前のフォルダ名を変更しましょう。

変更前「ground」

変更後「ground.png」

以上です。

使い方その4 画像アセットを有効にする

レイヤー名・フォルダ名の書き換えは以上です。
今度は設定を変更して画像アセットの書き出しを有効化しましょう。

Photoshopの上部メニューから、
「ファイル > 生成 > 画像アセット」と移動してクリックしましょう。

これで書き出しが有効になりました。

使い方その3 htmlフォルダにそのまま移動する

早速書き出した画像を確認してみましょう。
作業したPSDを上書き保存してPhotoshopを終了し、PSDがあるフォルダに「WebDesignExercise02-assets」というフォルダがあるかを確認します。

存在していればフォルダを開き、中の画像をすべて「html_anime」フォルダの中の「img」フォルダに移動しましょう。

構成の確認

以下にフォルダ・ファイルの構成を明記しておきます。

どうでしょうか？？できましたか？？

テンプレート部分のHTML・CSSコーディング

今回も基本は終わっているものとして、
テンプレート部分はサクサク進めてしまいます。

テンプレート部分のHTMLコーディング

まずはテンプレート部分のHTMLを記述します。
下記コードの全てをindex.htmlに記述しましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css">
<title>スクロールアニメーション</title>
</head>
<body>
</body>
</html>

以上です。

テンプレート部分のCSSコーディング

HTMLの記述が終われば今度はCSSの記述を追加しましょう。
下記コードの全てをmain.cssに記述しましょう。

main.css

@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
}

html , body {
  height: 100%;
}

以上です。

<div id=”container”></div>のHTMLコーディング

まずは今回のページで一番大きな枠、
<div id=”container”></div>のHTMLコーディングです。

<body></body>タグの開始タグと終了タグの間を改行し、
ハイライトされている<div id=”container”>〜</div>を記述しましょう。

index.html

<!-- 〜上部省略〜 -->
<body>

<div id="container">
<!-- /#container --></div>

</body>
</html>

以上です。

<div id=”container”></div>のCSSコーディング

Dreamweaverのタブを「main.css」に切り替えてください。
<div id=”container”></div>のCSSコーディングを行いましょう。

先ほど記述した「html , body {〜}」のセレクタの下を改行し、
ハイライトされている「#container {〜}」を記述しましょう。

main.css

/*-- 〜上部省略〜 --*/

html , body {
  height: 100%;
}

#container {
  width: 100%;
  position: relative;
  overflow: hidden;
/* -- ↓↓ backgroundプロパティを使って背景画像のグラデーションを設定 ↓↓ -- */
  background: rgb(52,152,219);
  background: -moz-linear-gradient(top, rgb(52,152,219) 0%, rgb(255,255,255) 100%);
  background: -webkit-linear-gradient(top, rgb(52,152,219) 0%,rgb(255,255,255) 100%);
  background: linear-gradient(to bottom, rgb(52,152,219) 0%,rgb(255,255,255) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3498db', endColorstr='#ffffff',GradientType=0 );
/* -- ↑↑ backgroundプロパティを使って背景画像のグラデーションを設定 ↑↑ -- */
}

background: linear-gradient(◯◯);

これは初めて出てきますね。
今回のデザインのPSDを見ると、背景が上から下へ、
青から白にグラデーションがかかっているのがわかります。

このグラデーションの指定を行っているのが、
background: linear-gradient(◯◯);などの5行のコードです。
やり方によってはもっと複雑なグラデーションを実装することも可能です。

以下のような便利なツールもあります。

Ultimate CSS Gradient Generator – ColorZilla.com

グラデーションを直感的に調整するだけで、
右側のウィンドウ内にコードを生成してくれます。

<div id=”cloud”></div>のHTMLコーディング

次に雲のアニメーションのためのブロック、
<div id=”cloud”></div>のコーディングを行います。

<div id=”container”></div>セクションの開始タグと終了タグの間を改行し、
ハイライトされている<div id=”cloud”>〜</div>を記述しましょう。

index.html

<!-- 〜上部省略〜 -->

<div id="container">

  <div id="cloud">
    <div class="cloud01"><img class="anime" src="./img/cloud01.png" /></div>
    <div class="cloud02"><img class="anime" src="./img/cloud02.png" /></div>
    <div class="cloud03"><img class="anime" src="./img/cloud03.png" /></div>
    <div class="cloud04"><img class="anime" src="./img/cloud04.png" /></div>
    <div class="cloud05"><img class="anime" src="./img/cloud05.png" /></div>
    <div class="cloud06"><img class="anime" src="./img/cloud06.png" /></div>
  <!-- /#cloud --></div>

<!-- /#container --></div>

<div id=”cloud”></div>の子要素の<div></div>のclassにそれぞれ「cloud◯◯」とつけています。これはそれぞれの要素の座標（縦横の位置）が違うためで、CSSでそれぞれに指定を行うことで別々の場所で動作させるようにするためです。

また、さらにその子要素の<img />タグにはすべて「anime」というclassをつけています。今回記述するJavaScriptでは、この「anime」というclassを持つものを探し出し、条件に合ったものをアニメーションさせています。

<div id=”cloud”></div>のCSSコーディング

再びDreamweaverのタブを「main.css」に切り替えてください。
<div id=”cloud”></div>のCSSコーディングを行いましょう。

<div id=”cloud”></div>の記述

次は雲にアニメーションさせるキャンバスを生成しましょう。

先ほど記述した「#container {〜}」のセレクタの下を改行し、
ハイライトされている「#cloud {〜}」を記述しましょう。

main.css

/*-- 〜上部省略〜 --*/

#container {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: rgb(52,152,219);
  background: -moz-linear-gradient(top, rgb(52,152,219) 0%, rgb(255,255,255) 100%);
  background: -webkit-linear-gradient(top, rgb(52,152,219) 0%,rgb(255,255,255) 100%);
  background: linear-gradient(to bottom, rgb(52,152,219) 0%,rgb(255,255,255) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3498db', endColorstr='#ffffff',GradientType=0 );
}

#cloud {
  width: 100%;
  height: 2640px; /* -- アニメーションのためにコンテンツの高さを確保 -- */
  position: relative; /* -- 子要素が左上の基準点を設定できるように指定 -- */
}

ここでは「height: 2640px;」として<div id=”cloud”></div>セクションの高さを指定しています。
これは雲の要素をアニメーションさせるためには絶対配置の指定を行う必要があり、子要素を絶対配置をしているために<div id=”cloud”></div>セクションの高さを保持できないからです。

<div id=”cloud”></div>セクションの高さをあらかじめ指定することで、
アニメーションさせるキャンバスの範囲を作り出しています。

<div id=”cloud”></div>の子要素の<div></div>（それぞれの雲の座標）、<img />のアニメーションの指定

次は6つそれぞれの雲への絶対配置指定を一括で行って、
子要素に読み込んだ雲の画像へアニメーションの指定を行います。

先ほど記述した「#cloud {〜}」のセレクタの下を改行し、
ハイライトされている「#cloud div {〜}」「#cloud div img.anime {〜}」を記述しましょう。

main.css

/*-- 〜上部省略〜 --*/

#cloud {
  width: 100%;
  height: 2640px; /* -- アニメーションのためにコンテンツの高さを確保 -- */
  position: relative; /* -- 子要素が左上の基準点を設定できるように指定 -- */
}

#cloud div {
  position: absolute; /* -- アニメーションさせる雲の要素をまとめて絶対配置に指定 -- */
}

#cloud div img.anime {
/* -- ↓↓ transitionプロパティでアニメーションの時間をまとめて指定 ↓↓ -- */
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
/* -- ↑↑ transitionプロパティでアニメーションの時間をまとめて指定 ↑↑ -- */
}

まず前提として、<div id=”cloud”></div>の直下の子要素に<div></div>が絶対配置されていますが、この<div></div>の役割はキャンバス上で座標を決めるためのもの、対して「anime」というclassがついた<img />の役割はアニメーションをさせるためのものです。

「#cloud div img.anime {〜}」に新しいプロパティ「transition」がありますが、参考ページにあるように、要素に「時間的変化」をもたらすプロパティで、簡単に言えば「要素に簡単な動きを持たせる」ことができます。

ちなみに「-webkit-」「-moz-」「-o-」などは、
第05回の講義で解説した「ベンダープレフィックス」と言うものですね。

参考：transition－CSS3リファレンス

<div class=”cloud01″></div>〜<div class=”cloud06″></div>に、大まかな座標を一括で指定

一括で絶対配置指定をしましたが、完成イメージのページは、
画面の中央から見て、左に3つ、右に3つの雲がありますよね。
アニメーションする要素が右側にあるか左側にあるかでプロパティが変わりますので、
その指定を行いましょう。

先ほど記述した「#cloud div img.anime {〜}」のセレクタの下を改行し、
ハイライトされている「#cloud .cloud01,#cloud .cloud03,#cloud .cloud05 {〜}」と「#cloud .cloud02,#cloud .cloud04,#cloud .cloud06 {〜}」を記述しましょう。

main.css

/*-- 〜上部省略〜 --*/

#cloud div img.anime {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
}

#cloud .cloud01,
#cloud .cloud03,
#cloud .cloud05 {right: 50%;} /* -- 画面右端から画面半分の位置 -- */

#cloud .cloud02,
#cloud .cloud04,
#cloud .cloud06 {left: 50%;} /* -- 画面左端から画面半分の位置 -- */

まず、上の記述の「#cloud .cloud01,#cloud .cloud03,#cloud .cloud05 {〜}」は、
画面中央から見て左側にある3つの雲の指定になります。
この時指定するプロパティは「right」です。

次に下の記述の「#cloud .cloud02,#cloud .cloud04,#cloud .cloud06 {〜}」は、
画面中央から見て右側にある3つの雲の指定になります。
この時指定するプロパティは「left」です。

左側にあるのになぜ「right」？右側なのになぜ「left」と思うかもしれませんね。
下の画像を見てみましょう。

要素を画面の左側に置くためには、画面右端から画面半分の距離をとってそこから個別に距離をとる必要があり、逆に画面の右側に置くためには、画面左端から画面半分の距離をとってそこから個別に距離をとる必要があります。

大まかに画面の左か右かを指定できたら次に6つの要素それぞれ個別に距離をとるために、
「margin」プロパティを使ってアニメーションの準備をします。
早速次の項の解説に移りましょう。

<div class=”cloud01″></div>に、アニメーションする前、後の位置を個別に指定

さていよいよアニメーションの準備を行います。

先ほど記述した「#cloud .cloud02,#cloud .cloud04,#cloud .cloud06 {〜}」のセレクタの下を改行し、ハイライトされている「#cloud .cloud01 {〜}」と「#cloud .cloud01 .anime {〜}」「#cloud .cloud01 .stop」を記述しましょう。

main.css

/*-- 〜上部省略〜 --*/

#cloud .cloud02,
#cloud .cloud04,
#cloud .cloud06 {left: 50%;}

#cloud .cloud01 {
  width: 200px;
  height: 100px;
  top: 500px; /* -- 画面上端から500pxの位置に指定 -- */
}
#cloud .cloud01 .anime {margin-left: -270px;} /* -- アニメーション前（この場所から） -- */
#cloud .cloud01 .stop {margin-left: -70px;} /* -- アニメーション後（この場所に移動） -- */

まず「#cloud .cloud01 {〜}」は要素の横幅と高さの指定、
そして「top: 500px;」として、画面上端からの距離を指定しています。
なんとなくわかりますよね？

問題は次の2つの指定です。

「#cloud .cloud01 .anime」はアニメーションする前の段階、
つまり、Webページを開いた時の初期状態を指定しています。
<img />タグに「anime」というclassをつけましたよね？
あの時の指定はここで判別され、animeというclassを持つ<img />タグのみに適用されるわけです。

最後に「#cloud .cloud01 .stop {〜}」はアニメーションが終わった後の状態、
つまり、スクロールして雲が動いて止まった位置の指定です。

ここで始まり（anime）と終わり（stop）の位置を指定し、
特定の位置までスクロールしたらjQueryを使って「stop」というclassをつけ、
「margin-left」の値を増減させてアニメーションさせるわけです。

<div class=”cloud02″></div>〜<div class=”cloud06″></div>に同様の指定をする

<div class=”cloud01″></div>以外の雲にもアニメーションの指定をしましょう。

先ほど記述した「#cloud .cloud01 .stop {〜}」の下を改行し、
ハイライトされている「#cloud .cloud02 {〜}」から
「#cloud .cloud06 .stop」を記述しましょう。

main.css

/*-- 〜上部省略〜 --*/

#cloud .cloud01 .stop {margin-left: -70px;}

#cloud .cloud02 {
 width: 200px;
 height: 100px;
 top: 1000px;
}
#cloud .cloud02 .anime {margin-left: 200px;}
#cloud .cloud02 .stop {margin-left: 0px;}

#cloud .cloud03 {
 width: 200px;
 height: 100px;
 top: 1400px;
}
#cloud .cloud03 .anime {margin-left: -380px;}
#cloud .cloud03 .stop {margin-left: -180px;}

#cloud .cloud04 {
 width: 200px;
 height: 100px;
 top: 1700px;
}
#cloud .cloud04 .anime {margin-left: 330px;}
#cloud .cloud04 .stop {margin-left: 130px;}

#cloud .cloud05 {
 width: 200px;
 height: 100px;
 top: 1900px;
}
#cloud .cloud05 .anime {margin-left: -360px;}
#cloud .cloud05 .stop {margin-left: -160px;}

#cloud .cloud06 {
 width: 200px;
 height: 100px;
 top: 2050px;
}
#cloud .cloud06 .anime {margin-left: 360px;}
#cloud .cloud06 .stop {margin-left: 160px;}

これで雲のアニメーション基本設定は完了しました。

<div id=”ground”></div>のHTMLコーディング

<div id=”ground”></div>の記述

次にページの一番下に表示している芝生のようなブロック、
<div id=”ground”></div>のコーディングを行います。

<div id=”cloud”></div>セクションの終了タグの下を改行し、
ハイライトされている<div id=”ground”>〜</div>を記述しましょう。

index.html

<!-- 〜上部省略〜 -->
  <!-- /#cloud --></div>

  <div id="ground">
  <!-- /#ground --></div>

<!-- /#container --></div>
<!-- 〜下部省略〜 -->

この<div id=”ground”></div>をページの一番下に配置させるため、
親要素である<div id=”container”></div>にはあらかじめ「position: relative;」を指定していますが、次項のCSSコーディングで<div id=”ground”></div>に「position: absolute;」を指定します。

<div id=”ufo”></div>の記述

最後に、人をさらおうとしたけど人違いだったことに気がついたプププ、
うっかりUFOさんのHTMLコーディングを行いましょう。

<div id=”ground”></div>セクションの開始タグと終了タグの間を改行し、
ハイライトされている<div id=”ufo”></div>を記述しましょう。

index.html

<!-- 〜上部省略〜 -->
  <!-- /#cloud --></div>

  <div id="ground">
    <div id="ufo"></div>
  <!-- /#ground --></div>

<!-- /#container --></div>
<!-- 〜下部省略〜 -->

これでUFOの準備は完了です。

<div id=”ground”></div>のCSSコーディング

再びDreamweaverのタブを「main.css」に切り替えてください。
<div id=”ground”></div>のCSSコーディングを行いましょう。

<div id=”ground”></div>の記述

では<div id=”ground”></div>をページの一番下に絶対配置する設定と、
背景画像に芝生をタイリング（敷き詰める）する設定を行いましょう。

先ほど記述した「#cloud .cloud06 .stop {〜}」の下を改行し、
ハイライトされている「#ground {〜}」を記述しましょう。

main.css

/*-- 〜上部省略〜 --*/

#cloud .cloud06 .stop {margin-left: 160px;}

#ground {
  width: 100%;
  height: 60px;
  position: absolute; /* -- 大地を絶対配置に指定 -- */
  left: 0; /* -- 画面左端に配置 -- */
  bottom: 0; /* -- 画面下端に配置 -- */
  background: url(../img/ground.png) repeat-x left bottom; /* -- 背景画像の指定 描画をX方向（横方向）に繰り返す 左下から描画 -- */
}

今回は「background-image」や「background-position」を使わず「background」というプロパティで背景画像に関する指定を一括で行いました。

CSS

セレクタ {
  background: 画像URL 繰り返し指定 左右の描画開始位置 上下の描画開始位置;
}

以上のように一括で指定を行うことができます。

<div id=”ufo”></div>の記述

ではUFOの指定を行いましょう。

先ほど記述した「#ground {〜}」の下を改行し、
ハイライトされている「#ground #ufo {〜}」と、
「#ground #ufo.stop {〜}」を記述しましょう。

main.css

/*-- 〜上部省略〜 --*/

#ground {
  width: 100%;
  height: 60px;
  position: absolute; /* -- 大地を絶対配置に指定 -- */
  left: 0; /* -- 画面左端に配置 -- */
  bottom: 0; /* -- 画面下端に配置 -- */
  background: url(../img/ground.png) repeat-x left bottom; /* -- 背景画像の指定 描画をX方向（横方向）に繰り返す 左下から描画 -- */
}

#ground #ufo {
  width: 300px;
  height: 340px;
  position: absolute; /* -- UFOを絶対配置に指定 -- */
  left: 50%; /* -- 画面左端から画面半分の位置 -- */
  bottom: 230px; /* -- 画面下端から230pxの位置 -- */
/* -- ↓↓ transitionプロパティでアニメーションの時間をまとめて指定 ↓↓ -- */
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
/* -- ↑↑ transitionプロパティでアニメーションの時間をまとめて指定 ↑↑ -- */
  transform: translateX(-50%); /* UFOの横幅の半分のサイズをマイナス方向（左）へ移動。 */
  opacity: 0; /* UFOの不透明度（0：完全に透明／1：完全に不透明） */
  background: url(../img/ufo.png) no-repeat center center; /* -- 背景画像の指定 描画を繰り返さない 上下左右共に中央から描画 -- */
}

#ground #ufo.stop {
  bottom: 30px; /* -- 画面下端から30pxの位置 -- */
  opacity: 1; /* UFOの不透明度（0：完全に透明／1：完全に不透明） */
}

「#cloud div img.anime {〜}」の指定の時にも使った、
「transition」プロパティを使用して「時間的変化」をもたらしています。

<div class=”cloud◯◯”></div>の時は「anime」のclassがある要素にアニメーション前の座標を指定し「stop」というclassをアニメーションが終わった際の指定にしていましたが、今回はアニメーション前の設定は<div id=”ufo”></div>自体に設定し、アニメーション後の「stop」の指定の追加のみを行います。

「stop」には「bottom」プロパティを使った縦方向の座標の増減と、
不透明度の指定を行える「opacity」というプロパティを使って、
時間的変化（アニメーション）を行わせる準備をしています。

アニメーションのためのHTML・JavaScriptコーディング

ではJavaScriptのコーディングを行ってアニメーションを実装していきましょう。

jQuery本体と「anime.js」を「index.html」に読み込む

まず「anime.js」を使用するために読み込みの記述を追加しましょう。

「index.html」の<head></head>セクション内、
<link rel=”stylesheet” href=”css/main.css”>の下を1行改行し、
ハイライトされているjQuery本体とanime.jsを読み込む記述を追加してください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="./js/anime.js"></script>
<title>スクロールアニメーション</title>
</head>
<body>
<!-- 〜下部省略〜 -->

jQuery本体と「anime.js」を読み込んだことにより

次に作成した「html_anime」フォルダ内の「js」フォルダ内にある「anime.js」をDreamweaverで開いてください。

今回のJavaScriptの記述は簡単にコードを書けるように、
jQueryの記述方法にならって行います。

ページの読み込みが終わったら処理を開始する
$(function(){〜});

まずはanime.jsに「$(function(){〜});」を記述します。
これはjQueryのコードを記述するときのお決まりのようなものです。

作成したanime.jsの最初の行から、
ハイライトされている以下のコードを記述してください。

anime.js

$(function(){ // DOM要素（Document Object Model）の読み込みが全て終わった時に実行する。
});

JavaScriptは基本的に、HTML内にあるタグなど（DOM要素）を全て読み込み終えた後に実行されるように記述します。HTMLは上の行から順番に読み込まれていくので、全てを読み込んでから実行させるためには「anime.js」などを</body>の直前に読み込むように記述します。

この「$(function(){〜});」の中に、実行するコードを記述していきます。

変数を宣言する
var 変数名 = △△△

ここではjQueryを使う上でとても便利な「変数」を使ってみましょう。
初心者の頃は「変数？なにそれ？うめぇんか？」くらいの感じでしたが、
使い始めると変数なしではjQueryでコードを書けなくなります。

変数は簡単に言うと「収納ボックス」です。100均とかで名前を書くことができるシールラベルがついてるものが売られてありますよね？あれを想像してください。収納ボックスのシールラベルに名前（変数名）を書いておいて、様々な荷物を入れていきます。

早速やっていきましょう。
先ほど記述した「$(function(){〜});」の間を改行し、
ハイライトされている以下のコードを記述してください。

anime.js

$(function(){ // DOM要素（Document Object Model）の読み込みが全て終わった時に実行する。

// 「スクロールできる上限の高さ」を求めるために、
// Webページの高さ（$(document).height()）から画面の高さ（$(window).height()）を引く。
  var bottomPos = $(document).height() - $(window).height();

// UFOを変数に代入
  var UFO = $('#ufo');
// UFOがアニメーションしているかどうかの判定を設定。
  var UFOflag = false; // true or false

}); // 一番外のfunction()

行っていることは以下。

  1. 「スクロールできる上限の高さ」を計算し「bottomPos」と名前を書いたボックスに入れておく。
  2. <div id=”ufo”></ufo>を「UFO」と名前を書いたボックスに入れる。
  3. UFOがアニメーション動作を行っているかどうか（真偽）の判定を行う必要があるので「UFOflag」と名前を書いた収納ボックスに入れる。

変数が便利なのは「bottomPos」の変数宣言のように、
毎回計算を行わなくてもあらかじめ計算した結果を入れることができることや、
変数宣言したものをいろいろな箇所で使いまわせることです。

ページがスクロールされた時の設定
$(window).on(‘scroll’, function() {〜});

今回は「スクロールアニメーション」の実装ですので、
スクロールして特定の場所に到達したらアニメーションを実行する、
という設定が必要になります。

$(window).on(‘scroll’, function() {〜});

とにかく記述してみましょう。
先ほど記述した「var UFOflag = false;」の下を改行し、ハイライトされている「$(window).on(‘scroll’, function() {〜});」を記述しましょう。

anime.js

/*-- 〜上部省略〜 --*/
  var UFOflag = false;

// ページがスクロールされた時の設定 ここから
  $(window).on('scroll', function() {

    var scroll = $(window).scrollTop(); // 現在のスクロール位置を計算。
    var windowHeight = $(window).height(); // 画面の高さを計算。

  }); // ページがスクロールされた時の設定 ここまで

}); // 一番外のfunction()

この記述を行うとスクロールするたびに「$(window).on(‘scroll’, function() {〜});」に記述した処理が実行されます。

「scroll」は現在スクロールされた高さ（◯◯px）でスクロールするたびに値が増減します。「windowHeight 」は画面の高さ（◯◯px）です。画面の高さを求めるには「 $(window).height();」で計算するようになります。

雲に対する動きの処理

スクロールして雲が移動するアニメーションを実装する処理です。

先ほど記述した「var windowHeight = $(window).height(); 」の下を改行し、ハイライトされている「$(“#cloud div”).each(function(){〜});」を記述しましょう。

anime.js

/*-- 〜上部省略〜 --*/

  $(window).on('scroll', function() {

    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();

    // #cloudの子要素のdiv（雲）に一つずつ処理を行う。
    $("#cloud div").each(function(){
      var imgPos = $(this).offset().top; // div（雲）の画面上端からの距離を計算。
      // スクロール位置 > divの画面上端からの距離 - 画面の高さ + 200px
      if (scroll > imgPos - windowHeight + 200){
        $(".anime",this).addClass('stop'); // 雲画像に「anime」のclassを追加。
      } else { // そうでない場合。
        $(".anime",this).removeClass('stop'); // 雲画像から「anime」のclassを削除。
      }
    });

  });

}); // 一番外のfunction()

「$(“#cloud div”).each(function(){〜});」は「<div id=”cloud”>の中にある<div></div>」に繰り返し処理を行う関数です。この記述によって6つの雲それぞれに、内側に記述している処理を行うことができます。

コメントに書いていますが「imgPos」はコンテンツ上端から雲の画像までの高さ、「scroll」は現在スクロールされたpxです。「windowHeight 」は画面の高さで、求めるには「 $(window).height();」で計算するようになります。

これらの数値を使い、ページがスクロールされたら、現在どこまでスクロールされているか？を割り出し、「if文（もし〜なら）」を使ってスクロール位置が特定の座標を超えたら「anime」というclassを追加する、という流れでアニメーションを実現しています。

UFOに対する動きの処理

ページの一番下までスクロールするとUFOが現れますね。
このアニメーションを実装する処理を記述しましょう。

先ほど記述した「 $(“#cloud div”).each(function(){〜});」の下を改行し、ハイライトされている「if ($(this).scrollTop() >= bottomPos – 200) {〜}」を記述しましょう。

anime.js

/*-- 〜上部省略〜 --*/

  $(window).on('scroll', function() {

    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();

    $("#cloud div").each(function(){
      var imgPos = $(this).offset().top;
      if (scroll > imgPos - windowHeight + 200){
        $(".anime",this).addClass('stop');
      } else {
        $(".anime",this).removeClass('stop');
      }
    });

    // スクロール位置がスクロールできる上限の高さから-200pxした座標に到達した場合の条件分岐。
    if (scroll >= bottomPos - 200) {
      if (UFOflag == false) { // UFOflagが偽（UFOは動いていない）の場合。
        UFOflag = true; // UFOflagを真（UFOは動いている）に変更。
        UFO.addClass('stop'); // UFOに「stop」というclassを追加する。
      }
    } else { // そうでない場合。
      if (UFOflag) { // UFOflagが真（UFOは動いている）の場合。
        UFOflag = false; // UFOflagを偽（UFOは動いていない）に変更。
        UFO.removeClass('stop'); // UFOから「stop」というclassを削除する。
      }
    }

  });

}); // 一番外のfunction()

コメントに「スクロール位置がスクロールできる上限の高さから-200pxした座標に到達した場合の条件分岐。」という説明を書いています。スクロール量で判別するのは雲の画像と同じですが、ここで最初に変数定義した「bottomPos」や「UFO」「UFOflag」を使っています。

以上です。 記述が終わったら、index.htmlをブラウザで開いて、 
動画が表示されているかどうか確認してみてください。

課題の提出

今回のWeb動画の埋め込みも課題として提出を行います。
「html_anime」フォルダのデータを提出しましょう。

提出用に「html_anime」フォルダをまるごとzip形式で圧縮してください。

「html_anime」フォルダをzip形式で圧縮

まず、「html_anime」フォルダ圧縮の手順は以下。

  1. 「html_anime」フォルダを右クリックして、「送る」→「圧縮（zip形式フォルダー）」を選択してzipファイルを作る。
  2. ファイル名を自分の学籍番号に変更する。

以上です。

zip圧縮したファイルをフォームから送信

なお、こちらのフォームに提出できるのは「zip形式で圧縮したファイルのみ」です。zip形式ではないファイルだと送信の際にエラーが出て送信ができませんので、必ず「html」フォルダをまるごと圧縮してzip形式で提出してください。

学籍番号（必須）
氏名（必須）
フリガナ (必須)
メールアドレス
質問など
課題ファイル

課題の提出ができたら今回の講義は終了です。

RELATED POSTS関連記事

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE