実際にプログラミングする感覚をつかもう

実際にプログラミングする感覚をつかもう – メディアデザイン実習J今までの授業とはやり方をかえて、このページにはサンプルコードはのせません。

講師がその場でプログラミング実況するのに合わせて、みなさんもリアルタイムに書いていってください。

すべて、jQueryを使った書き方です。

 

 

1:ボタンがクリックされたらダイアログ表示

まずHTML側にbuttonタグを配置しましょう。

そして、ボタンクリックの処理はjQueryではどう書くんでしたっけ?

ダイアログ表示は、alert() でしたよね。

 

2:ボタンがクリックされたらオブジェクトが右に移動する

※動作デモ: http://dev.koekatamarin.com/zokei/move/

 

まず、HTMLにdivタグを配置します。id=”obj” とします。

このdiv要素を、CSSで、タテヨコ100px・ボーダー1px・左から100px上から100pxに絶対配置します。

オブジェクトの位置を動かすには animate() を使います。

‘+=’ または’-=’を使えば、相対的に移動させることが出来ます。

オブジェクトを徐々に消すには、fadeOut() を使うか、 opacityをanimateさせます。

 

 

3:ボタンがクリックされたら背景が変わる

動作デモ: http://dev.koekatamarin.com/zokei/onoff/

素材ファイル: http://dev.koekatamarin.com/zokei/sozai_20130702.lzh

 

まず、HTMLにclass=”on”のbuttonタグを配置します。

buttonのCSSを定義します。

JavaScriptで、ボタンがクリックされたら、bodyのクラスをonにするように書きます。

CSSで、クラスがonのときのbodyに背景を表示するよう定義します。

うまく表示させるには、bodyとhtmlの両方がheight:100%;でないといけません。

さらに、背景のオンオフに合わせて、ボタンの状態も変えるともっとかっこよくなります。

クリックされたら、bodyとは逆に、buttonはクラスがoffになるように書きます。

 

 

4:実践的なコーディング

ここからは、実際の商用サイトを参考に進めましょう!

背景画像の切り替えを、より実践的に行います。

 

↓今回選んでみたのはこちら

翠星のガルガンティア

http://gargantia.jp/

gar

 

素材はさきほどと同じ物を使います。

 

HTMLには、ボタンタグではなく、aタグを書きます。href= には、#ページ名を入れます。

 

今回は、背景画像切り替えを、bodyタグではなくdiv#mainでやってみましょう。

CSSが少しややこしくなります。

 

JavaScriptでは、クリックされたらクラスを追加するようにします。

クラスのオン・オフ関係では、3つ以上の背景に切り替えられませんよね。

aタグのクラス名を取得して、div#mainに同じクラス名をひっつけるようにします。

 

実際に動かしてみると、なんだか少しおかしい気がします。

ただクラスを追加しただけではクラスが重複してしまうので、クラスを追加する前にクラスを消す処理も必要なのです。

これでひとまず複数背景の切り替えは出来ました。

 

さらに、切り替えの際にカーテンのようなエフェクトを付けます。

動作デモ: http://dev.koekatamarin.com/zokei/gar/

 

まず、JavaScriptのaddClassとremoveClassをコメントアウトします。

HTMLに div id=”cover” を追加して、

CSSで left:-100%; に絶対配置します。

この状態では、カーテンは見えません。クリックしても何も動作しません。

 

javaScriptで、クリックされた後に、div#coverをleft:0;にanimateさせます。

このとき、jQueryでは-100%がうまく処理されないようなので、画面の横幅を取得して、-1を掛け算した値で絶対配置し直します。

これで、カーテンが右に閉じますね。

デュレーションとイージングのパラメーターも設定してみます。

 

さらにanimateをチェーンさせて、閉じたすぐ後に再び開くことができます。

同じオブジェクトに対して順番にメソッドを実行するには、メソッドチェーンという書き方があります。

 

2つのanimateの間に、背景画像を切り替える処理を書きたいのですが、これはオブジェクト(主語)が異なるのでチェーンでは書けません。

代わりに、コールバックを使って順番に処理を実行することにします。

まずはさきほどのanimate2つを、コールバックで書き直します。

正常に動いたら、今度はコールバックの中に、切り替え処理を加えます。

 

これでカーテンが閉じたら画像を切り替えるようになっているはずですが、

画像の読み込み時間を考慮して、

ダミーのanimateを100ミリ秒ほど実行してから、コールバックでカーテンを閉じることにしましょう。

 

 

以上です!

さらに商用サイトのように近づけるには、オブジェクトを動かしたりフェードインさせたりで出来ますよね?

 

Have fun!(^ω^)




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です